CSSシークレット ―47のテクニックでCSSを自在に操る

Flexboxを使った解決策

Flexbox（w3.org/TR/css‐flexbox）はまさにこのような問題のため

に作成されました。現在考えられる解決策の中では、 Flexboxを使ったも

のが最善です。他の解決策も紹介したのは、 Flexboxよりも幅広いブラウ

ザでサポートされているからです。ただし、今日では十分に多くのブラウ

ザでFlexboxを利用できるようになっています。

ここで必要になる宣言は 2 行だけです。中央揃えしたい要素の親要素

（今回の例では body）に display:flexを指定し、中央揃えされる要

素（同じくmain）にはおなじみの margin:autoを指定します。具体的

には次のようにします。

Flexboxを使う場合、margin:autoを指定すると横方向だけでなく縦

方向にも中央揃えが行われます。また、幅を指定する必要もありません

（指定してもかまいません）。 P.292の「内在的なサイズ設定」で紹介し

た、max‐contentを指定した場合と同じ幅になります。

body{

 display:flex;

 min‐height:100vh;

 margin:0;

}

main{

 margin:auto;

}

FUTURE

より簡単な配置

将来的には、レイアウトモードを変更しなくても縦方向の中央揃えが可能になる予定です。 CSSBox

AlignmentLevel3（w3.org/TR/css‐align‐3