KuzLog

KuzLog
2017/01/11 2018/11/13 Web制作

【CSS】要素を上下や左右に中央寄せする簡単な方法

「左右」の中央寄せは頻繁に使いますが、「上下」や「上下左右」の中央寄せとなると一瞬戸惑う…という人は結構いるんじゃないでしょうか?

今回はテキストやブロック要素など、様々なコンテンツを中央寄せするテクニックを紹介します。

最初に書いておきますが、この記事はdisplay:flexを使った中央寄せのテクニックがメインです。なので、Flexboxがよく分からない!という方はこちらの記事を軽く読んでおいたほうが幸せになれます。

(中央寄せしたいのが)テキストの場合

左右の中央寄せ

これは簡単。中央寄せしたいテキストを内包しているブロック要素にtext-align: center;を指定するだけです。

DummyText

上下の中央寄せ

まず、中央寄せしたいテキストを内包している要素をdisplay: flex;でFlexコンテナ化します。次にテキスト(Flexアイテム)の縦方向の位置をalign-items: center;で中央に指定。これで上下中央にテキストが表示されます。

DummyText

ちなみに、親要素にdisplay: table-cell;vertical-align: middle;を指定する方法もあるんですが、個人的にFlexを使ったほうが分かりやすいので割愛します…

上下左右の中央寄せ

先程のコードに、横方向のアイテム位置を中央に指定するjustify-content: center;を追加するだけでOK。

DummyText

(中央寄せしたいのが)ブロック要素の場合

左右の中央寄せ

中央寄せしたいブロック要素にmargin: 0 auto;を指定すると、左右の余白が自動的に計算されて中央に配置されます。

上下の中央寄せ

テキストの上下中央寄せと同じく、Flexを使えば簡単です。

上下左右の中央寄せ

これもテキストの上下左右中央寄せと同じ方法でOKです。Flex万能だな…

最後に

左右に中央寄せするだけなら、やはり文字ならtext-align: center;、ブロック要素ならmargin: 0 auto;を使うという、馴染み深い手法を使うのが一般的です。そこに上下の中央寄せが絡んでくるならdisplay: flex;を使う、というのが一番簡単ですね。

一昔前はブロック要素の上下中央寄せにposition: absolute;top: 0;bottom: 0;margin: auto;を使うのが主流だった気がするんですが、それと比べコードも短く綺麗だし、何より理解しやすいです。Flexマジ万能