CSSでよくやる中央揃え

2020年6月22日 00:42

CSSでレイアウトする時に、とくに自分のなかに方法論がないと、意外と苦戦する「中央揃え」。

横方向はなんとなく text-align とかでやることもできますが、レスポンシブとか固定でないレイアウトを組む時は text-align だと小さいサイズのレイアウト用にスタイルの上書きが発生したりとか非効率になったりしがちです。

また縦方向のセンタリングは結構初心者には鬼門で、 vertical-align 設定してみたけど変わらない…とか一度は経験するやつじゃないかと思います。

今回は、そんな「CSS で中央揃えしたい時によくつかうやつ」について、僕なりのベストな方法を説明してみたいと思います。

I ♥ Flexbox!

Flexbox が使えるようになってから、大抵レイアウトは Flexbox で組むのが自分のやり方。

中央揃えの方法は Flexbox 以前にもいろんな Tips があり、その時々で最適と思うものをつかってきましたが、いまは大抵 Flexbox をつかっています。

中央揃えに限らず、僕の場合、レイアウトのほとんどは Flexbox を使っています。
そんな僕なりの Flexbox の使い方や、レイアウトの仕方は、また別の記事でも詳しく書ければとおもっています！

Flexbox には justify-content と align-items という子要素の並び方や揃えを設定できる2つのプロパティが用意されています。大抵の場合、これで簡単にセンタリングできます。

ちなみに、Flexbox は縦か横どちらか一方向に子要素を並べる、という機能なので、その方向の設定（flex-direction）によって、justify-content と align-items のどちらがタテ方向、どちらがヨコ方向の揃えを設定するプロパティになるかが変わります。

flex-direction: row （横方向の Flexbox）の場合
• justify-content が横方向
• align-items が縦方向

のそれぞれの揃えの設定となります。

flex-direction: column（縦方向の Flexbox）の場合は、 row の場合と逆で、
• justify-content が縦方向
• align-items が横方向
の揃えの設定。

中央揃えしたい！となったら、大抵これで済ませてしまうのが、最近の僕のやり方。

Flexbox を使わない場合によくやるのは margin: auto を使う方法です。

幅（width）に何かしらの固定値や相対値が設定されている子要素に、左右の margin を auto と設定すると、左右方向にセンタリングされます。

Flexboxがまだ使えない時代から一般的に使われてたやつ。
Flexbox使うようになってから、僕のなかではだいぶ出番がなくなった気がします。

Flexbox が使えるようになってからはあんまり使ってないですが、Flexbox 以前に縦と横同時にセンタリングしたい場合によくやってたのが、 position: absolute と margin: auto とかを使った方法。

これでもセンタリングはできますが、高さ（height）に固定値などを設定しておかないと機能しなかったり、画面サイズとかに応じて柔軟なレイアウトに使おうとすると結構コツとか気をつけなきゃいけないポイントがあって、これも Flexbox が使えるようになってからあまり使わなくなりました。

Flexbox 出てくる前から CSS 書いていた自分としては、センタリング（特に縦方向）とかは、いつもひと手間かかるアレだったので、「色々工夫してやったなー」という思いがあって、なんとなく鬼門の一つというイメージで、これまでに使ってきた方法を記事にしてみようとおもって書き始めたんですが…

書いてるうちに、「結局、いまさら使う必要のない Tips とか書いても仕方ないよなー」とおもいはじめて、いま使っている方法から書いていったら、結局、昔いろいろ工夫してなんとか解決してたような問題はほぼほぼ Flexbox で解決されてて、CSS 書くのも楽な時代になったなーと改めて思いました。

IE11 もやっとブラウザ市場から退場してくれそうだし、Flexbox とか Grid とかもあまり変な心配なく使えるのはほんと良いですね。