CSSで要素を上下中央にする方法まとめ

WEBサイトをコーディングしているときに上下中央にする方法に迷ったことはありませんか？

左右中央ならtext-align:center;かmargin:0 auto;で簡単にできますが、
上下中央は少しテクニックが必要です。

今回はflexboxやpositionを使った上下中央にする方法を3種類ご紹介します。

どの方法もレスポンシブ対応で、ウィンドウサイズを変化させても常に中央にくる方法になっています。

flexboxのalign-items:centerを使う

一番簡単なのがflexboxのalign-item:centerです。

親要素にdispley:flex;とalign-items:center;をかけます。
align-items:center;の代わりに、子要素にalign-self :center; でも同じ結果になります。

div.oya{
display:flex;
align-items:center;
}
div.ko{
}

通常のカラムレイアウトなどにおいては、この方法がベストだと思います。

flexboxが登場するまではこの方法が主流だったと思います。

position:absolute;で配置した要素にtop:0;とbottom:0;をかけてmargin:auto;にすることで上下中央に配置されます。
(左右中央も同様にleft:0;とright:0;とmargin:auto;で中央になります)

ただし、中央に配置したい要素にheightをpx(ピクセル)で指定する必要があります。

div.oya{
position: relative;
}
div.ko{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: 100px;
}

メインビジュアルのロゴ配置など、通常のレイアウトとは違う特殊な部分には向いている方法だと思います。

これもpositionを利用した方法ですが、先ほどのようにheightの指定は必要ありません。

まずposition:absolute;とtop:50%;で親要素の中央部分に子要素の頭がくるように配置します。

そこから、transform:translateY(-50%);で子要素の高さの半分だけ上に移動します。

これによって、どんな高さの子要素が来ても必ず上下中央に配置されます。
図にすると以下のようなイメージです。

div.oya{
position: relative;
}
div.ko{
position: absolute;
top: 50%;
transform: translateX(-50%);
}

transformまで使った特殊な技法ですが、文章量など高さが変わる可能性のある要素には最適な方法です。

ほとんどの場合flexboxで事足りると思いますが、flexboxが複雑に入れ子になる場合などにもこの方法が活用できると思います。