CSSでかんたん上下中央配置

たびたび必要になるのですが、ある要素を親要素の真ん中に配置したいときってありますよね。

こういうやつですね

今回使うHTML

こんな感じのHTMLにCSSを適用していきます。

<div class="box">
  <div class="inner-box"></div>
</div>

左右中央はブロック要素ならとても簡単で、

.box {
  margin: 0 auto;
}

で即解決なのです！

また、これ以外にも子要素がインライン要素などの場合は、

.box {
  text-align: center;
}

などでも左右中央を実現できます。

インライン要素

さらにここに親要素に高さが指定されると…
内側の子要素は上端にくっついてしまいます。

かつては上から50%の位置で

.inner-box {
  display: absolute;
  top: 50%;
}

などを使いがんばって上下中央配置を実現していました。

ほかにも、
疑似要素使って親要素の大きさを調べたり、
Javascriptを使って調節するやり方もありますね。

ですが、これがCSS3の登場によりグッとカンタンにできるようになりました。
それもずばりFlexBoxを使います。

親要素にFlexBoxを指定するだけ。

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

これだけ！
子要素にCSSを指定する必要はありません！
といっても子要素に大きさがないと表示上いなくなっちゃいますから注意ですが。
これは親要素、子要素の大きさが変わっても上下中央になるのでとても使いやすいです！

とってもかんたんです。
でもこれはFlexBoxの便利なところの一部というのがすごいですね。
本来はレイアウトに使うものですが、また機会があれば書いてみたいと思います。