Centering

6. 究極の中央寄せ

「CSSで中央寄せができない」という時代は終わりました。
Flexbox、Grid、そして古典的な margin: auto。それぞれの使い分けを学びましょう。

3つの主要な方法

🥇 Flexbox（推奨）

Flex

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

🥈 Grid（最短）

Grid

.parent {
  display: grid;
  place-items: center;
}

📜 margin: auto（横方向のみ）

margin

.child {
  margin: 0 auto;  /* 横中央 */
  /* 縦は別途必要 */
}

🎮 中央寄せ実験

方法

横方向

縦方向

Box

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}