CSSで要素を上下方向に中央寄せしたいときにはFlexboxを使うと良い

Webメディアを開発しているとぶち当たるであろう「どうやって縦方向にセンタリングすればよいのかわからない」問題に対する処方箋です。

インライン要素であれば、vertical-align: middleで解決するかもしれません。
しかし、ブロック要素の縦方向での中央寄せは一筋縄にいかず、table-cellを利用した解決策などHackyなテクニックが生み出されてきました。

しかし、いまではFlexboxを使うことでとても簡単に実装できます。
現代のモダンブラウザには、ほぼすべてのブラウザにFlexboxが実装されているため、Flexboxを利用した方がよいと思われます。 ¹

以下にコード例を示します。²

<div class="parent-elem">
  <div class="child-elem">
    ...
  </div>
</div>

.parent-elem {
  display: flex;
  align-items: center; /* 縦方向のセンタリング */
  justify-content: center; /* 横方向のセンタリングもついでに */
}

.child-elem {
  /* 特定の小要素だけをセンタリングしたい場合は親要素にalign-itemsを当てるのではなく、こちらを使うとよい */
  align-self: center;
}

---

1. FlexboxにバグがあるIE11に対応する必要があるのならば、polyfillをいれることをオススメします。 ↩

2. CodepenでSampleも書いておきました。 ↩