高さが不明な要素を上下中央配置する

CSS で高さが分からない要素を上下中央揃えする方法。

今回は .wrapper というボックスが height:100% で1ページ分の画面の高さいっぱいに広がっていて、その中に .box というボックスがあるレイアウトで考える。よくポートフォリオ系のシングルページのサイトで見かける、「1画面文に気の利いた一言がドンと載ってる」みたいなのを長い縦スクロールで表現されるようなイメージの、アレ。

.box の中にコンテンツを置いていくが、このコンテンツは .box ごとに異なるので、.box の高さが定まらない。でも .wrapper の中で .box を上下中央に配置したい…。そんな状況。

サンプルは以下。

.wrapper に必要なのは高さ指定と position:relative のみ。今回は height:100% にした関係で、html 要素と body 要素にも height:100% を書いておく。

次に .box は position:absolute で絶対配置にするが、親要素である .wrapper の position:relative に従い、.wrapper が基準になる。そこで top:50% と指定すると、.box は .wrapper の上限中央の位置から下に配置される。

これでは「画面の真ん中から下に要素がある」状態なので、transform:translateY(-50%) とすることで、その要素の高さの半分だけ、上方向に移動させてあげる。transform は要素の回転や歪み、移動などができるプロパティ。必要であればベンダプレフィックスを付ける。

これで .wrapper の高さを基準に、.box が上下中央に配置された。

とりあえずやりたいことのはじめの一歩はできたが、現時点では .box が画面左側に寄っていて見づらいので、次回修正する。

続きは以下。