[CSS]幅や高さが不明な要素を中心に配置する、IE8対応の古い方法とモダンブラウザ対応の最新の方法

CSSで子要素を親要素の中心に配置するには、水平と垂直の両方の方向に対して中央揃えにする必要があります。特に、子要素の幅や高さが不明な場合はやっかいです。

幅や高さが不明な子要素を親要素の中心に配置するIE8にも対応した古い方法、モダンブラウザ対応の最新の方法を紹介します。

Centering: The Newest Coolest Way vs. The Oldest Coolest Way

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• 子要素を親要素の中心に配置するIE8にも対応した古い方法
• 子要素を親要素の中心に配置するモダンブラウザ対応の最新の方法

画像やテキストごとに適した配置方法は、下記の記事をご覧ください。

• 高さが分からない要素やテキストを上下中央に揃えるスタイルシートのまとめ
• 要素を上下左右の中央に配置、最近主流になっている実装方法のまとめ

子要素を親要素の中心に配置するIE8にも対応した古い方法

IE8で幅や高さが不明な子要素を親要素の中心に配置するには「display: table;」を利用します。このテーブルで垂直方向を設定できるので、子要素に「vertical-align: middle;」を指定します。

HTMLは非常にシンプルです。ここではbodyを親要素にしています。

親要素に「display: table;」を与え、子要素に「vertical-align: middle;」を指定します。

IE8を含む、すべてのブラウザで子要素が親要素の中心に配置されます。
これは、中心に配置する最も古いテクニックです。

子要素を親要素の中心に配置するモダンブラウザ対応の最新の方法

そして現在では、モダンなレイアウト方法を使用することができます。そうです、FlexboxとCSS Gridです！

CSS Gridが利用できるのであれば、もっと簡単に実装できます。

HTMLはさきほど同じです。

親要素に「display: grid;」を与え、「place-items: center center;」を指定します。子要素には何も必要ありません。

CSS Gridとplace-itemsをサポートするブラウザで、子要素が親要素の中心に配置されます。
参考: CSS Gridのサポートブラウザ、place-itemsのサポートブラウザ

これは最先端のコードで、Microsoft EdgeはCSS Gridはサポートしていますが、「place-items」をサポートしていません。Edgeをサポートするには、「place-items: center center;」の代わりに、下記のように記述します。