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