Flexboxで要素をセンタリング

Flexboxによる完璧なセンタリング

要素を水平・垂直の両方向にセンタリングすることは、歴史的にCSSで最もフラストレーションの溜まるタスクの1つでした。Flexboxならわずか3つのプロパティで簡単に実現できます。

CSSコード

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

仕組み

• display: flexはフレックスフォーマッティングコンテキストを確立します。
• justify-content: centerは主軸（rowレイアウトでは水平方向）に沿って子要素を中央に配置します。
• align-items: centerは交差軸（rowレイアウトでは垂直方向）に沿って子要素を中央に配置します。

これら2つの配置プロパティを合わせることで、両方の次元で完璧なセンタリングを実現します。絶対配置、transform、table-cellハックは不要です。

複数アイテムのセンタリング

複数のアイテムをセンタリングする場合、グループとしてセンタリングされます：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  min-height: 100vh;
}

一般的な使用例

• ページ中央に配置されたログインフォーム
• ローディングスピナーやプログレスインジケーター
• センタリングされたコンテンツのヒーローセクション
• モーダルダイアログ
• エンプティステートのイラスト