Webメディアを開発しているとぶち当たるであろう「どうやって縦方向にセンタリングすればよいのかわからない」問題に対する処方箋です。
インライン要素であれば、vertical-align: middle
で解決するかもしれません。
しかし、ブロック要素の縦方向での中央寄せは一筋縄にいかず、table-cell
を利用した解決策などHackyなテクニックが生み出されてきました。
しかし、いまではFlexboxを使うことでとても簡単に実装できます。
現代のモダンブラウザには、ほぼすべてのブラウザにFlexboxが実装されているため、Flexboxを利用した方がよいと思われます。 1
以下にコード例を示します。2
<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;
}