CSS基礎 練習問題 30：CSSフレックスボックスによる要素の中央配置
要素を画面の中央（水平方向・垂直方向とも）に配置したい場合、Flexboxを使った正しいCSSの書き方はどれか。
- .box { display: flex; justify-content: center; align-items: center; }
- .box { display: flex; text-align: center; vertical-align: center; }
- .box { display: flex; justify-content: middle; align-items: middle; }
- .box { display: block; justify-content: center; }
- .box { display: flex; align-content: center; }
正解と解説を見る
正解：.box { display: flex; justify-content: center; align-items: center; }
Flexboxコンテナにおいて、主軸方向の配置は「justify-content」、交差軸方向の配置は「align-items」で指定する。両方に「center」を指定することで、子要素を水平・垂直方向ともに中央揃えにできる。
【正解の理由】
「display: flex;」を指定したうえで「justify-content: center;」（主軸方向の中央揃え）と「align-items: center;」（交差軸方向の中央揃え）を組み合わせることで、子要素を完全に中央配置できる。
【不正解の理由】
• 「text-align: center; vertical-align: center;」：これらはテキストやインライン要素の配置に使うプロパティであり、Flexboxコンテナ自体の子要素配置には効果がない
• 「justify-content: middle; align-items: middle;」：Flexboxのプロパティ値に「middle」は存在せず、無効な値となる
• 「display: block; justify-content: center;」：justify-contentはFlexboxまたはGridコンテナでのみ有効であり、display: blockでは機能しない
• 「align-content: center;」のみ：align-contentは複数行になった場合の行間の配置を制御するプロパティであり、単一行の子要素の水平中央揃えには効果がない