[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ
Post on:2017年7月31日
sponsors
div要素やp要素に画像やテキストなどを配置した高さや幅のサイズが分からない要素を外側の容器の高さが不明でも天地左右の中央、ビューポートの中央に配置するスタイルシートのテクニックを紹介します。
Centering horizontally and vertically in CSS
float, transform, position, display:flex;などを使ったテクニックが紹介されており、ページの実装に合わせて、実装方法を決めるとよいでしょう。
デモではsection要素がコンテナに、div要素が中央に配置されています。
floatを使用して、天地左右の中央に配置します。ポイントはtransformで自身の高さと幅の50%を移動させること。%で配置するので、サイズが不明でも中央に配置できます。
|
1 2 3 4 5 |
<section class=container-float> <div class=centered-float> 中央に配置 </div> </section> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
[class^="container-float"] { height: 100vh; /* コンテナの高さ、ユニットとは無関係 */ } [class^="container-float"]::after { content: ""; display: table; clear: both; } [class^="centered-float"] { position: relative; float: left; top: 50%; left: 50%; transform: translate(-50%, -50%); } |
floatを使用せずに、天地左右の中央に配置します。
|
1 2 3 4 5 |
<section class=container-noFixedHeight> <div class=centered-noFixedHeight> 中央に配置 </div> </section> |
|
1 2 3 4 5 6 7 8 9 10 |
[class^="container-noFixedHeight"] { position: relative; min-height: 100vh; /* コンテナの高さ、ユニットとは無関係 */ } [class^="centered-noFixedHeight"] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } |
要素の高さと幅の最大値を設定し、天地左右の中央に配置します。
子要素のボリュームが不明で、背景を確実に一定量見せたい時にベストです。
|
1 2 3 4 5 |
<section class=container-absolute> <div class=centered-absolute> 中央に配置 </div> </section> |
|
1 2 3 4 5 6 7 8 9 10 11 |
[class^="container-absolute"] { position: relative; height: 100vh; /* コンテナの高さ、ユニットとは無関係 */ } [class^="centered-absolute"] { position: absolute; max-width: 50%; max-height: 18.5rem; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } |
flexboxを使って、天地左右の中央に配置します。
IE10+であれば、たった3行でできるこの方法が一番簡単です。
|
1 2 3 4 5 |
<section class=container-flexbox> <div class=centered-flexbox> 中央に配置 </div> </section> |
|
1 2 3 4 5 6 7 8 |
.container-flexbox { /* IE9ではサポートされていない */ height: 100vh; /* コンテナの高さ、ユニットとは無関係 */ display: flex; align-items: center; justify-content: center; } .centered-flexbox { } |
sponsors
