bodyにdisplay: flexを付けても上下中央揃えにならない理由

flexを付けても上下中央揃えにならない?

bodyにdisplay: flexを付けても上下中央揃えにならないことがある。

例えば以下のようなWebページの場合に発生する。

<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
</head>
<body>
  <p>bodyタグ内の上下左右中央揃え</p>
</body>

サンプル(NG例)

bodyで上下左右中央揃えにするには以下のいずれかの対応が必要なのだがどれだかわかるだろうか。

  1. align-itemsをalign-contentにする
  2. align-itemsをalign-selfにする
  3. flex-direction: column; を追記する
  4. bodyにheight: 100%を追記する
正解はこちら(正解率10%)

5. htmlとbodyにheight: 100%;を追加する

サンプル(正解)

カテゴリーcss