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
