[CSS]高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ

テキストやdiv要素など、高さが分からない要素を外側の容器の高さが不明でも、天地・左右・天地左右・ビューポートの天地左右の中央に配置するCSSのテクニックを紹介します。

天地・左右・天地左右の中央に配置するCSSのテクニック

イラスト: Girls Design Materials

2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実質IE11を考えてWeb制作をすればよいことになります。
参考: Internet Explorer サポートポリシー変更の重要なお知らせ

そんなIE11時代、そして万が一のIE9を考慮した中央配置テクニックを紹介します。

要素を左右の中央に配置

要素を左右の中央に配置する場合は、その要素がテキストかそれ以外かで異なります。

テキストを左右の中央に配置

パラグラフや見出しなどに含まれるテキストを左右の中央に配置します。

画像やブロック要素を左右の中央に配置

画像やブロック要素(テキストをブロック要素で内包した場合も)を左右の中央に配置します。
配置する要素は幅を持っている必要があり、幅を持っていない場合は幅を指定します。

両方にp要素の左右中央がありますが、それぞれ異なります。
「text-align: center;」はp要素内のテキストが中央配置で、「margin: 0 auto;」はp要素自体が中央配置です。

要素を天地の中央に配置

中に配置する要素の高さも不明、外側の容器の高さも不明で、天地の中央に配置します。

高さ不明の要素を天地の中央に配置

positionをrelativeにし、topから50%に配置し、さらにtransformで自身の高さの50%を上方向に移動させて配置します。%で配置するので、要素も容器も高さ不明で天地の中央に配置できます。
※対応ブラウザはすべてのモダンブラウザと、IEは9+です。

要素を天地左右の中央に配置

天地左右の中央に配置するテクニックは、要素のサイズが不明な場合、そしてFlexboxを使った超シンプルなコードの2本立てです。

サイズが不明な要素を天地左右の中央に配置

天地の中央と同じ仕組みで、天地左右の中央に配置します。

Flexboxを使って天地左右の中央に配置

IE10+であれば、Flexboxで指定するのが簡単です。
flexのサポート状況 -Can I Use

シンプルなコードですが、使用時にはSafari用にプレフィックスが必要です。

要素をビューポートの天地左右の中央に配置

「position: absolute;」で配置された要素のデフォルトの容器はビューポートで、ブラウザの場合、それはブラウザのウインドウを意味します。

ビューポートの天地左右の中央に配置

「margin-right: -50%;」は「left: 50%;」を補うために指定しており、容器の幅を50%減らし、右に同じ量のマージンを指定することで、本来の容器の幅と同じ幅になります。

参考

top of page

©2016 coliss
o