CSSで要素を上下左右中央寄せする方法（Flexbox）
「要素を画面の真ん中に置きたい」——CSSで意外とつまずくのが中央寄せです。今はFlexboxを使えば、上下左右の中央配置が数行で実現できます。コピペで使える基本形から覚えましょう。
.parent {
display: flex;
justify-content: center;
align-items: center;
}| プロパティ | 役割 |
|---|---|
| display: flex | Flexboxを有効にする |
| justify-content: center | 横方向の中央寄せ |
| align-items: center | 縦方向の中央寄せ |
仕組みを理解する
親要素にFlexboxを設定するのがポイントです。
- 親に指定する
- 中央寄せしたい要素そのものではなく、その「親要素」にFlexboxを指定します。子要素が中央に配置されます。
- 横と縦を分けて指定
- justify-contentが横方向、align-itemsが縦方向の配置を担当します。両方centerで上下左右の中央になります。
コツ：横方向と縦方向で担当プロパティが違うのがポイント。justify-content（横）とalign-items（縦）をセットで覚えれば、中央寄せはもう迷いません。
つまずきやすい点
うまくいかないときの確認点です。
- 親に高さがない…縦中央にするには親要素に高さが必要なことが多い。
- 指定する要素を間違える…子でなく親にflexを指定する。
- 方向の取り違え…flex-directionを変えると、縦横の担当が入れ替わる。
注意：縦方向の中央寄せが効かないときは、親要素に高さ（heightなど）があるか確認しましょう。高さがないと、縦方向に中央寄せする「余白」が生まれず、効果が見えません。
あわせて読みたい：CSSで影をつける方法（box-shadow）の基本／JavaScriptで配列の重複を削除する方法（Set）／HTML / CSSの記事一覧
まとめ
Flexboxでの中央寄せは親要素にdisplay: flex、justify-content: center（横）、align-items: center（縦）を指定するだけ。横と縦で担当プロパティが違う点を押さえましょう。縦中央が効かないときは、親要素の高さを確認するのが解決のコツです。
よくある質問
Flexboxで中央寄せする方法は？
親要素に display: flex; justify-content: center; align-items: center; を指定します。これで子要素が上下左右の中央に配置されます。
justify-contentとalign-itemsの違いは？
justify-contentが横方向、align-itemsが縦方向の配置を担当します。両方をcenterにすると上下左右の中央寄せになります。
縦方向の中央寄せが効かない
親要素に高さがないことが多い原因です。高さがないと縦に中央寄せする余白が生まれません。親要素にheightなどで高さを指定すると効きます。
中央寄せはどの要素に指定する？
中央寄せしたい要素自身でなく、その親要素にFlexbox（display: flex など）を指定します。すると中の子要素が中央に配置されます。