[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%減らし、右に同じ量のマージンを指定することで、本来の容器の幅と同じ幅になります。

参考

sponsors

top of page

©2024 coliss