コーディングをしていると、子要素を親要素の中央に配置する場面が多々あると思います。
さまざまな方法がありますが、CSSだけでできるとてもシンプルな方法を4つご紹介します。
やり方によって、長所短所があるので使うシーンによって使い分けができるとコーディングが捗ります。
共通のHTML
HTMLは共通のものを使用します。
<div class="example">
<div>中央寄せしたい要素</div>
</div>transformを使った方法
.example {
position: relative;
}
.example div {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}このやり方には1点問題があって、要素の高さが小数点の場合、ぼやけて表示されてしまいます。
要素の高さが小数点になりがちな、文章などには向いていないかもしれません。
display: flex;を使った方法
.example {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}個人的に一番使う方法です。
ベンダープレフィックスをつけると長くなってしまいますが、汎用性があり使いやすいです。
必要なベンダープレフィックスは変更される可能性があります。
2019年最新のベンダープレフィックスは下記記事をご覧ください。
display: grid;を使った方法
.example {
display: -ms-grid;
display: grid;
place-items: center center;
}Edgeでは「display: grid;」をサポートしていないので、対応する場合は下記のようにします。
.example {
display: -ms-grid;
display: grid;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}calcを使った方法
.example {
position: relative;
}
.example div {
position: absolute;
top: calc(50% - ○○px); /* 「○○px」には要素の半分の数値を指定 */
left: calc(50% - ○○px); /* 「○○px」には要素の半分の数値を指定 */
} calc関数を使って、要素の半分の数値だけずらしています。
この方法は、要素のサイズが決まっている場合にしか使えません。
まとめ
それぞれ長所・短所があるので、好みや場面によって使い分けましょう！
