どうもこんにちは。
Web/App/UIデザイナーのサトウです。
今回は、CSSで親要素の上下左右中央に子要素を配置する3つの方法について書いていきます。
CSSで親要素の上下左右中央に子要素を配置する3つの方法
CSSで親要素の上下左右中央に子要素を配置する方法はいくつかありますが、汎用的かつ代表的なものは次の3つです。
- display: flex; を使う方法
- display: grid; を使う方法
- position と transform を使う方法
共通する前提
親要素に対して子要素を縦方向・横方向とも中央に配置するというものです。
つまり、いずれの場合も親要素は任意の幅（width）と高さ（height）を持っている必要があります。
そうでなければそもそも「中央」を定義することができませんね。
幅（width）と高さ（height）は固定の数値である必要はありません。
「%」や「em」といった相対的なものでもOKです。
では、それぞれの方法について詳しく見ていきましょう。
display: flex; を使う方法
親要素に
display: flex;
justify-content: center;
align-items: center;
と、任意の幅（width）、高さ（height）を指定します。
See the Pen
center positioning by flex by foolishlife (@foolishlife)
on CodePen.
justify-content は flex の子要素に対して横方向の配置を指定するプロパティ、
align-items は 同じく縦方向の配置を指定するプロパティです。
「横方向」「縦方向」という表現は flex-direction が初期値である row または row-reverse である場合を前提としています。
もし flex-direction が column または column-reverse の場合は縦横が逆転しますので注意してください。
ちなみに justify-content と align-items は次に紹介する grid にも同様に使用できるのですが、挙動が若干変わってきます。
是非、試してみてください。
display: grid; を使う方法
親要素に
display: grid;
place-content: center;
と、任意の幅（width）、高さ（height）を指定します。
See the Pen
center positioning by grid by foolishlife (@foolishlife)
on CodePen.
place-content は grid の子要素に対して縦方向と横方向の配置を同時に指定するプロパティです。
ですので、本来は
place-content: center center;
という記述になりますが、縦横に同じ指定をする場合は省略して記述することができます。
ちなみに、place-content は先に紹介した flex にも同様に使用できるのですが、挙動が若干変わってきます。
是非、試してみてください。
position と transform を使う方法
親要素に
position: relative;
と、任意の幅（width）、高さ（height）を指定し、子要素に
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
を指定します。
See the Pen
center positioning by foolishlife (@foolishlife)
on CodePen.
基準（position: relative;）となる親要素に対して絶対配置（position: absolute;）を指定した子要素を、親要素の上から50％、左から50％の位置に配置し、その子要素に対して transform: translate(-50%, -50%); でX軸（横方向）マイナス方向に自身の幅の50%移動、Y軸（縦方向）マイナス方向に自身の50%移動させています。
子要素の配置開始地点が親要素の縦横50％の位置になるので、特にサイズ指定をしなければ子要素の幅は親要素の50%までとなります。
それより大きいサイズにしたい場合は、width: min(); 等で幅を指定するといいでしょう。
また、子要素の高さが嵩んだ場合はそれに応じて親要素の高さが可変しますが、縦方向のスクロールが生じるほどに伸びてくると、子要素の上部は transform で-50%した分だけ隠れてしまいます。JavaScriptを使うなどして対応するといいでしょう。
flex や grid を使う方法であればこれらの心配はいりません。状況に応じて最も適した方法で実装しましょう。
【番外編】table を使う方法
親要素に
display: table;と、任意の幅（width）、高さ（height）を指定し、子要素に
display: table-cell;
text-align: center;
vertical-align: middle;
を指定します。
See the Pen
center positioning by table by foolishlife (@foolishlife)
on CodePen.
table のセル（thやtd）では横の配置を指定する text-align と縦の配置を指定する vertical-align が使用できます。
これは普通に table 使ってももちろんできますが、div など他の要素に対して display で table, table-cell を指定してあげることで擬似的に table や table-cell として振る舞わせることで table を使わなくても実現できるという方法です。
table は本来、表組を実装するための要素であり、レイアウトを実現するために使用するのは好ましくありません。
過去には苦肉の策として用いられることもありましたが、現在は flex や grid があり、わざわざレイアウトのためだけに display: table; を使用する理由はないでしょう。
さて、今回は、CSSで親要素の上下左右中央に子要素を配置する3つの方法について書いてみました。
いかがだったでしょうか？
読んでくださったあなたの参考に少しでもなれば嬉しいです。
それではまた次回。
