CSSを使用して、要素を中央に寄せる方法を紹介します。
中央に配置するのはいろいろな方法があります。
要素を中央に寄せる方法
画像やテキストなど左右同じ隙間をあけて配置したり、上下で同じ余白をあけたかったりしますよね?
こんなときCSSで上下・左右・上下左右中央に配置する方法をいくつか紹介します。
左右中央に要素を配置する
ブロック要素を中央に配置する
<div class="box"></div>
.box{ width: 300px; height: 300px; margin: 0 auto; background-color: black; }
ブロック要素の中のインライン要素を左右中央に配置する
<div class="box"> <img src="imgのリンクパス"> </div>
.box{ width: 300px; height: 300px; text-align: center; }
ブロック要素の中のものをpaddingで上下中央に配置する
<div class="box"> <div class="center"></div> </div>
.box{ width: 100px; padding: 10px 0; background-color: black; } .center{ width: 50px; height: 50px; background-color: #FFF; }
ブロック要素の中のものを上下中央に配置する
heightとline-heightを同じ数値にすることで上下中央に配置できます。
ただし、テキストの場合2行にわたる場合には使用できません。
<div class="box"> テキスト </div>
.box{ width: 100px; height: 60px; line-height: 60px; background-color: black; color: #FFF; }
高さのわからない要素の上下中央に配置する
translateでずれている部分を半分戻しています。
<div class="box"> <div class="center"></div> </div>
.box{ width: 100px; height: 100px; background-color: black; position: relative; } .center{ width: 50px; height: 50px; position: absolute; top: 50%; transform: translateY(-50%); -webkit- transform: translateY(-50%); background-color: #FFF; }
positionで上下左右中央に配置する
translateでずれている部分を半分戻しています。
<div class="box"> <div class="center"></div> </div>
width: 100px; height: 100px; background-color: black; position: relative; } .center{ width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%); background-color: #FFF; }
flexboxで上下左右中央に配置する
flexboxは要素を横に並べたり、並べ替えたりできるプロパティですが、中のコンテンツを中央に配置するときにも使用できます。
<div class="box"> <div class="center">center</div> </div>
.box{ width: 100px; height: 100px; background-color: black; display: flex; justify-content: space-between; align-items: center; } .center{ width: 50px; height: 50px; background-color: #FFF; }
いかがでしょうか!
中央に配置できましたか?
CSSテクニックを日々更新していきます!
ABOUT ME