[CSS]レスポンシブ対応の最新版!サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ

div要素やp要素に画像やテキストなどを配置した高さや幅のサイズが分からない要素を外側の容器の高さが不明でも天地左右の中央、ビューポートの中央に配置するスタイルシートのテクニックを紹介します。

要素を天地左右の中央に配置するスタイルシートのテクニック

Centering horizontally and vertically in CSS

float, transform, position, display:flex;などを使ったテクニックが紹介されており、ページの実装に合わせて、実装方法を決めるとよいでしょう。

デモではsection要素がコンテナに、div要素が中央に配置されています。

デモのキャプチャ

デモ

floatを使用して、天地左右の中央に配置します。ポイントはtransformで自身の高さと幅の50%を移動させること。%で配置するので、サイズが不明でも中央に配置できます。

デモのキャプチャ

デモ

floatを使用せずに、天地左右の中央に配置します。

デモのキャプチャ

デモ

要素の高さと幅の最大値を設定し、天地左右の中央に配置します。
子要素のボリュームが不明で、背景を確実に一定量見せたい時にベストです。

デモのキャプチャ

デモ

flexboxを使って、天地左右の中央に配置します。
IE10+であれば、たった3行でできるこの方法が一番簡単です。

top of page

©2017 coliss