CSSで要素を縦横中央配置する方法はいくつかあり、よく使われているのは、display:table;
やネガティブマージンを使った方法だと思います。
今回は、そんないくつかある「縦横中央配置するための方法」をまとめました。
CSSで要素を縦横中央配置する方法
HTMLの方はだいたい同じようなものを書いていますが、CSSの書き方がどれも違う方法を使って縦横中央配置しています。
1.display:table;を使う
display:table;
を使い、縦方向は、vertical-align: middle;
で中央へ、横方向は、text-align: center;
で中央へ配置しています。
1 2 3 |
<section class="box"> <p>この文章はダミーです。<br>文字の大きさ、量、字間、行間等を確認するために入れています。</p> </section> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.box { display: table; //要素をテーブル化 width: 500px; height: 150px; background: #929090; margin: 0 auto 1em; padding: 1em; border-radius: .2em; color: white; font-size: .875em; text-align: center; //横方向の中央配置 line-height: 1.6; } .box> *{ display: table-cell; vertical-align: middle; //縦方向の中央配置 } |
2.ネガティブマージンを使う
まずは、親要素に対して子要素が半分の位置にくるようにします。
あとは、子要素の横と高さの半分をネガティブマージンで指定します。
1 2 3 |
<section class="box"> <p>この文章はダミーです。<br>文字の大きさ、量、字間、行間等を確認するために入れています。</p> </section> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.box{ position: relative; width: 500px; height: 150px; background: #929090; margin: 0 auto 1em; padding: 1em; border-radius: .2em; color: white; font-size: .875em; text-align: center; line-height: 1.6; } .box p{ width: 100%; position: absolute; top: 50%; //縦方向の半分へ left: 50%; //横方向の半分へ text-align: center; margin: -2em 0 0 -50%; //縦横の大きさの半分をネガティブマージンする color: #fff; font-size: 14px; line-height: 1.6; } |
3.display:inilne-block; (::before)を使う
要素をinilne-block
し、縦方向をvertical-align: middle;
で中央へ設置しています。
ただ、この方法、親要素の高さを取得していないと中央配置できないのが難点なところ。
1 2 3 |
<section class="box"> <p>この文章はダミーです。<br>文字の大きさ、量、字間、行間等を確認するために入れています。</p> </section> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.box{ display: blcok; width: 500px; height: 150px; background: #929090; margin: 0 auto 1em; padding: 1em; border-radius: .2em; color: white; font-size: .875em; text-align: center; line-height: 1.6; } .box > *{ vertical-align: middle; // 縦方向の中央配置 display: inline-block; // 子要素をinline-blockにする } .box::before{ content: ""; height: 100%; vertical-align: middle; width: 0px; display: inline-block; } |
4.position: absolute;を使う
以下のリンクにて詳しく解説されていますので、そちらを参照してください。
とてもわかりやすいです。
5.子要素の大きさをCSSで指定しない
3つ目と似ているのですが、こちらは、子要素の大きさを指定していません。
6.縦の中央配置
最後に、縦横中央配置ではないのですが、縦方向を中央にしてくれます。
(※デモでは、横も中央にしてみました。)
ネガティブマージンではなく、transform
を使って、縦方向を中央に設置しています。
最後に、以下に1から5までのデモをまとめました。
全体を見たい方はこちらをご覧ください。
display:table;
を使うのが、簡単で柔軟に対応できるかなと思うのですが、やはりちゃんと全体をみて、それぞれ使い分けていけるようになりたいですね。