CSS Flexboxで中央寄せする方法｜justify-content align-items

📌

結論

Flexboxで中央寄せするには justify-content + align-items + min-height

📝 実際のコードはこちら

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

なぜmin-height: 100vhが必要？

align-items: center は親の高さの中で中央に配置します。bodyの高さがコンテンツ分しかないと、垂直中央に見えません。min-height: 100vh で画面いっぱいの高さを確保します。

・水平中央: justify-content: center ・垂直中央: align-items: center ・画面全体にするには min-height: 100vh が必要

Flexboxで要素を画面中央に配置してみましょう。

🧪 ここで試せます ─ 壊しても大丈夫！

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

■ 演習

Flexboxでdivを画面中央（水平・垂直）に配置してください。

詰まったらヒント

justify-content: center; align-items: center;