CSSだけで実装できる、要素を上下左右中央に配置する4つの方法 コーディング

使い分けできてる?CSSで要素を上下左右中央寄せにする4つの方法

コーディングをしていると、子要素を親要素の中央に配置する場面が多々あると思います。
さまざまな方法がありますが、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関数を使って、要素の半分の数値だけずらしています。
この方法は、要素のサイズが決まっている場合にしか使えません。

スポンサーリンク

まとめ

それぞれ長所・短所があるので、好みや場面によって使い分けましょう!

「Flexbox」の関連記事一覧