「左右」の中央寄せは頻繁に使いますが、「上下」や「上下左右」の中央寄せとなると一瞬戸惑う…という人は結構いるんじゃないでしょうか？
今回はテキストやブロック要素など、様々なコンテンツを中央寄せするテクニックを紹介します。
最初に書いておきますが、この記事はdisplay:flexを使った中央寄せのテクニックがメインです。なので、Flexboxがよく分からない！という方はこちらの記事を軽く読んでおいたほうが幸せになれます。
これは簡単。中央寄せしたいテキストを内包しているブロック要素にtext-align: center;を指定するだけです。
|
1 2 3 |
<div class="box1"> <span>DummyText</span> </div> |
|
1 2 3 |
.box1{ text-align: center; } |
まず、中央寄せしたいテキストを内包している要素をdisplay: flex;でFlexコンテナ化します。次にテキスト（Flexアイテム）の縦方向の位置をalign-items: center;で中央に指定。これで上下中央にテキストが表示されます。
|
1 2 3 |
<div class="box2"> DummyText </div> |
|
1 2 3 4 5 |
.box2{ height: 100px; display: flex; align-items: center; } |
ちなみに、親要素にdisplay: table-cell;とvertical-align: middle;を指定する方法もあるんですが、個人的にFlexを使ったほうが分かりやすいので割愛します…
先程のコードに、横方向のアイテム位置を中央に指定するjustify-content: center;を追加するだけでOK。
|
1 2 3 |
<div class="box2"> DummyText </div> |
|
1 2 3 4 5 6 |
.box3{ height: 100px; display: flex; align-items: center; justify-content: center; } |
中央寄せしたいブロック要素にmargin: 0 auto;を指定すると、左右の余白が自動的に計算されて中央に配置されます。
|
1 2 3 |
<div class="box4Wrap"> <div class="box4"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
.box4Wrap{ width: 100%; height: 200px; background: #e5e5e5; } .box4{ width: 100px; height: 100px; background: #e74c3c; margin: 0 auto; } |
テキストの上下中央寄せと同じく、Flexを使えば簡単です。
|
1 2 3 |
<div class="box5Wrap"> <div class="box5"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.box5Wrap{ width: 100%; height: 200px; background: #e5e5e5; display: flex; align-items: center; } .box5{ width: 100px; height: 100px; background: #e74c3c; } |
これもテキストの上下左右中央寄せと同じ方法でOKです。Flex万能だな…
|
1 2 3 |
<div class="box6Wrap"> <div class="box6"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.box6Wrap{ width: 100%; height: 200px; background: #e5e5e5; display: flex; align-items: center; justify-content: center; } .box6{ width: 100px; height: 100px; background: #e74c3c; } |
左右に中央寄せするだけなら、やはり文字ならtext-align: center;、ブロック要素ならmargin: 0 auto;を使うという、馴染み深い手法を使うのが一般的です。そこに上下の中央寄せが絡んでくるならdisplay: flex;を使う、というのが一番簡単ですね。
一昔前はブロック要素の上下中央寄せにposition: absolute;top: 0;bottom: 0;margin: auto;を使うのが主流だった気がするんですが、それと比べコードも短く綺麗だし、何より理解しやすいです。Flexマジ万能。
