【初心者必見！】CSSで要素を上下中央にできる7つの方法

皆さんはCSSで要素を上下中央揃えにする時にどの方法を使っていますでしょうか？
有名な方法だとtext-align: center;やmargin: 0 auto;などありますが実はそれだけではデザインを再現できない時も・・・

そこで今回は要素の上下中央揃えの方法を実例付きでご紹介しようかと思います。

1:text-align: center;

https://codepen.io/seimangorira/embed/XWYboYZ?height=300&default-tab=html%2Cresult&slug-hash=XWYboYZ&user=seimangorira&name=cp_embed_1

中身のテキストや画像といったインライン要素の中央寄せは、親となるブロック要素にtext-align: center;を指定します。

2:margin: 0 auto;

https://codepen.io/seimangorira/embed/XWYboYZ?height=300&default-tab=html%2Cresult&slug-hash=XWYboYZ&user=seimangorira&name=cp_embed_2

こちらはブロックごと中央寄せする方法。widthを指定する必要がありますが%指定をすればレスポンシブwebデザインの対応が可能。合わせてmax-widthを使うこともあります。

3:display: inline-block;

https://codepen.io/seimangorira/embed/XWYboYZ?height=300&default-tab=html%2Cresult&slug-hash=XWYboYZ&user=seimangorira&name=cp_embed_3

親要素にtext-align: center;を指定し子要素にdisplay: inline-block;を指定することで子要素の幅は要素に依存しますが中央揃えをすることができます。

上下左右、4方向からの中央寄せ

4:vertical-align: middle;

https://codepen.io/seimangorira/embed/XWYboYZ?height=300&default-tab=html%2Cresult&slug-hash=XWYboYZ&user=seimangorira&name=cp_embed_4

vertical-alignが使えるのはインライン要素orテーブルセルになりますので、上下中央寄せにしたいテキストを内容する要素にdisplay: table-cell;を指定します。

5.position: absolute; + margin: auto;

https://codepen.io/seimangorira/embed/XWYboYZ?height=300&default-tab=html%2Cresult&slug-hash=XWYboYZ&user=seimangorira&name=cp_embed_5

ブロックには、width・heightの指定が必須です。
ですので、内包物の高さがheightを超えてしまった時ははみ出ることになります。

6:transform

https://codepen.io/seimangorira/embed/XWYboYZ?height=300&default-tab=html%2Cresult&slug-hash=XWYboYZ&user=seimangorira&name=cp_embed_6

これは中央寄せする要素の左上を起点として上から50%（top: 50%;）・左から50%（left: 50%;）の位置に移動させ、要素の大きさの半分ずつを戻す（translate）、という動きをしています

7.display: flex;

https://codepen.io/seimangorira/embed/XWYboYZ?height=300&default-tab=html%2Cresult&slug-hash=XWYboYZ&user=seimangorira&name=cp_embed_7

先ほどのtransformと異なるのは、中央寄せした要素の横幅が成り行きになること。
ただしモダンブラウザのみの場合に使える方法になりますので注意が必要です。

CSSの中央揃えは一癖ありますが慣れれば状況に応じた中央揃えの指定ができるようになります。
ですので一度色々試してみて状況に応じた挙動を知ることが大切でしょう！