【HTML CSS】親要素内での子要素の上下左右中央揃え

本サイトはアフィリエイト広告を利用しています

WEBデザインをしている中で、「親要素」に対して「子要素」を上下左右中央に配置したいことがよくあります。

その時の備忘録としてここに残しておきます。

スポンサーリンク

方法1

display:flexを使う

フレックスボックス（フレキシブルボックス）「display: flex」を親要素に指定し、「justify-content: center;」と「align-items: center;」で上下中央寄せを実現します。

See the Pen 【display:flex】親要素内の中央寄せ by cape (@C-A-P-E-DESIGN) on CodePen.

方法2

positionを使う

親要素に position:static（初期値）以外を指定。

See the Pen 【position】親要素内の中央寄せ by cape (@C-A-P-E-DESIGN) on CodePen.

position: absoluteの、「top」「right」「bottom」「left」の値を初期値（auto）以外に指定。

「margin: auto;」により上下左右中央寄せが実現します。

横方向のみであれば、親要素にposition: absolute;は不要です。

 

方法3

positionとtransformを使う

方法2にtransformを組み合わせて指定します。

See the Pen 【position+transform】親要素内の中央寄せ by cape (@C-A-P-E-DESIGN) on CodePen.

親要素、または画面を基準に「上、左の0値から50％ずつ移動」させ、「translate(X方向の距離, Y方向の距離)」を使用し、移動させる要素の50％分をX方向にマイナス移動、Y方向にマイナス移動で結果的に上下左右中央が実現されるという仕組みです。

 

方法4

table-cellを使う

中央揃えしたい要素に「table-cell」を指定。

table-cellを指定した要素はmarginが効かなくなるので、もう一つのdiv要素で囲うことで解決します。

See the Pen 【display:table-cell】親要素内の中央寄せ by cape (@C-A-P-E-DESIGN) on CodePen.

薄いグレーが囲っているdiv要素になります。

 

参考にさせて頂きました。

CSSで中央寄せの方法いろいろメモ – Qiita

CSSで中央寄せあれこれをメモ。text-alignで横方向中央寄せインラインの子要素を左右中央寄せにします。.center{ border: 1px solid #aaa; width: 4…

最後までお読みいただき、ありがとうございます。