flexを付けても上下中央揃えにならない?
bodyにdisplay: flexを付けても上下中央揃えにならないことがある。
例えば以下のようなWebページの場合に発生する。
<style>
body {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<p>bodyタグ内の上下左右中央揃え</p>
</body>
bodyで上下左右中央揃えにするには以下のいずれかの対応が必要なのだがどれだかわかるだろうか。
- align-itemsをalign-contentにする
- align-itemsをalign-selfにする
- flex-direction: column; を追記する
- bodyにheight: 100%を追記する