Flexbox を使ってページ全体を中央寄せにするテスト

HTML の body要素に display: flex を使って中央寄せにするテストページです。

コード

以下が、このページに記述してあるコード（の断片）です。

HTML

<body>
  <main>
    <h1>タイトル</h1>
    <div>
      ...
    </div>
    ...
  </main>
</body>

CSS

body {
  margin: 0 5vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body要素に指定したCSSプロパティ
プロパティ 説明
display: flex (1) body要素を フレックスコンテナにする。
flex-direction: column (2) 主軸方向を縦（ブロック要素の並ぶ方向）にする。
align-items: center (3) フレックスコンテナ内の各アイテムを、交差軸方向（主軸に直交する方向）中央に配置する。ここでは main 要素に対する中央寄せになる。main 要素を挟まない場合は、body の子要素全てがそれぞれの幅を持った状態で中央寄せになる。
margin: 0 5vw (補助的)コンテンツが横に伸びる可能性があるので、左右のマージンを指定する。

メモ

関連

参考