CSSのFlexboxで子要素を水平方向・垂直方向ともに完全に中央揃えにする記述として正しいものはどれか？

解説

<p>正解は <code class='code'>display: flex; justify-content: center; align-items: center;</code> です。これはCSSにおける中央揃えの最も実用的で信頼性の高い方法です。</p><h3>各プロパティの役割</h3><pre><code>.container { display: flex; justify-content: center; /* 主軸（デフォルトは水平）方向の中央揃え */ align-items: center; /* 交差軸（デフォルトは垂直）方向の中央揃え */ height: 100vh; /* 高さの指定がないと垂直方向の中央が効かない */ }</code></pre><h3>なぜ他の選択肢は間違いなのか</h3><p><code class='code'>text-align: center</code> はインライン要素のテキスト配置であり、Flexアイテムの配置には影響しません。<code class='code'>vertical-align: middle</code> はインライン要素やテーブルセルに対するプロパティで、Flexboxでは無効です。</p><p><code class='code'>margin: 0 auto</code> は水平方向の中央揃えには使えますが、垂直方向には効きません。<code class='code'>place-content: center</code> は <code class='code'>align-content</code> と <code class='code'>justify-content</code> の一括指定であり、単一行のFlexコンテナでは <code class='code'>align-content</code> が効かないため、<code class='code'>align-items</code> を使う方が適切です。</p><h3>CSS Gridでの代替</h3><pre><code>/* Grid を使えばさらに短く書ける */ .container { display: grid; place-items: center; }</code></pre>