【CSS】Flexboxで中央揃え完全ガイド｜水平・垂直・完全中央配置の全パターンと実務テクニック

display: flex;              /* Flexコンテナにする */
flex-direction: row;        /* デフォルト: 主軸は横方向 → */
flex-direction: column;     /* 主軸を縦方向 ↓ に変更 */

主軸と交差軸のルール

• flex-direction: row（デフォルト）→ 主軸＝横方向、交差軸＝縦方向
• flex-direction: column → 主軸＝縦方向、交差軸＝横方向
• justify-content は常に主軸方向の配置を制御
• align-items は常に交差軸方向の配置を制御

.container {
  display: flex;
  justify-content: center;  /* 水平方向に中央揃え */
}

実行結果

.container {
  display: flex;
  justify-content: center;
  gap: 16px;  /* 要素間の余白 */
}

実行結果

.container {
  display: flex;
  align-items: center;  /* 垂直方向に中央揃え */
  height: 200px;       /* 高さの指定が必須 */
}

実行結果

注意：align-items: centerで垂直中央にならない場合、ほとんどのケースでコンテナに高さが指定されていないことが原因です。heightやmin-heightを明示的に指定してください。

.container {
  display: flex;
  justify-content: center;  /* 水平中央 */
  align-items: center;      /* 垂直中央 */
  height: 100vh;            /* ビューポート全体 */
}

実行結果

ポイント：この3行の組み合わせ（display: flex + justify-content: center + align-items: center）は、CSS中央揃えの黄金パターンです。真っ先に覚えておきましょう。

.container {
  display: flex;
  flex-direction: column;    /* 主軸を縦方向に */
  justify-content: center;  /* 縦方向の中央（主軸） */
  align-items: center;      /* 横方向の中央（交差軸） */
  height: 100vh;
}

実行結果（要素が縦に積まれて中央配置）

.container {
  display: flex;
  height: 300px;
}

.child {
  margin: auto;  /* 上下左右の余白を自動分配 → 完全中央 */
}

実行結果

.nav {
  display: flex;
  align-items: center;
}

.nav-logo {
  margin-right: auto;  /* ロゴを左に、残りを右に押しやる */
}

実行結果

.container {
  display: flex;
  flex-wrap: wrap;             /* 折り返しを許可 */
  justify-content: center;    /* 各行の水平中央 */
  align-content: center;      /* 行グループ全体の垂直中央 */
  gap: 12px;
  height: 300px;
}

align-items と align-content の違い

• align-items: 各行内のアイテムの交差軸方向の配置（1行ずつ）
• align-content: 複数行全体の交差軸方向の配置（行グループまとめて）
• flex-wrap: wrap を使って複数行になった場合にだけ align-content は効果がある

実行結果（タグが折り返して中央配置）

.container {
  display: flex;
  align-items: flex-start;  /* 全体は上揃え */
  height: 200px;
}

.special {
  align-self: center;     /* この要素だけ垂直中央 */
}

.bottom {
  align-self: flex-end;   /* この要素だけ下揃え */
}

実行結果

/* テキストだけ中央にしたい → text-align */
p {
  text-align: center;
}

/* ボックスごと中央に配置したい → Flexbox */
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ボックスを中央に置き、中のテキストも中央 → 併用 */
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;  /* 複数行テキストも中央揃え */
}

注意：flex-direction: columnにすると、justify-contentが縦方向、align-itemsが横方向の制御に変わります。「水平中央にしたいのにjustify-content: centerが効かない」と感じたら、flex-directionを確認してください。

/* NG: 子要素が親いっぱいに広がり、中央揃えの意味がなくなる */
.child {
  width: 100%;  /* これがあると水平中央にならない */
}

/* OK: widthを指定しないか、具体的な値を設定 */
.child {
  width: 300px;  /* または max-width */
}

/* 1行の場合 → align-items を使う */
.single-line {
  display: flex;
  align-items: center;      /* OK */
}

/* 複数行の場合 → align-content を使う */
.multi-line {
  display: flex;
  flex-wrap: wrap;
  align-content: center;    /* 複数行の全体を中央に */
}

ポイント：justify-contentやalign-itemsは、display: flexが指定されたFlexコンテナ上でのみ機能します。子要素に直接書いても効きません（align-selfは除く）。

/* Flexbox: 2プロパティ必要 */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid: 1プロパティで済む */
.grid-center {
  display: grid;
  place-items: center;  /* align-items + justify-items の一括指定 */
}

ポイント：単一要素の中央配置だけならdisplay: grid; place-items: center;が最短です。ただし複数要素を横に並べたい場合や、IE対応が必要な場合はFlexboxを選択しましょう。

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

.card {
  flex: 1 1 300px;   /* 最小300px、伸縮可能 */
  max-width: 400px;   /* 最大幅を制限 */
}

/* モバイル: 縦積みに変更 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .card {
    max-width: 100%;
  }
}

.fullscreen-center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;  /* dvh: モバイルのアドレスバー考慮 */
}

vh vs dvh vs svh

• 100vh: ビューポートの高さ（モバイルでアドレスバーを含む場合がある）
• 100dvh: 動的ビューポート高さ（アドレスバーの表示/非表示に追従）
• 100svh: 最小ビューポート高さ（アドレスバー表示時の高さ）
• モバイル対応では dvh が推奨（2025年現在、主要ブラウザ対応済み）

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;       /* 垂直中央揃え */
  padding: 0 24px;
  height: 64px;
}

実行結果

.card-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;   /* 内部コンテンツを水平中央 */
  text-align: center;
  padding: 32px;
  width: 280px;
}

実行結果

.modal-overlay {
  position: fixed;
  inset: 0;              /* top/right/bottom/left: 0 の一括指定 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.modal {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}

実行結果（イメージ）

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

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e2e8f0;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.button-with-icon {
  display: inline-flex;   /* inline-flex でインラインに配置 */
  align-items: center;    /* アイコンとテキストを垂直中央 */
  gap: 8px;              /* アイコンとテキストの間隔 */
}

実行結果

ポイント：Flexboxの基本プロパティはIE11を含む全ブラウザで対応済みです。gapプロパティだけはIE非対応ですが、2025年現在のモダンブラウザでは問題なく使えます。IE対応が必要な場合はmarginで代替してください。

この記事のポイント

• 水平中央: justify-content: center
• 垂直中央: align-items: center（+ 高さ指定が必須）
• 完全中央: justify-content: center + align-items: center
• 子要素単体: margin: auto で余白を自動分配
• 個別調整: align-self で特定の子だけ位置変更
• flex-direction を変えるとjustify-contentとalign-itemsの軸が入れ替わる
• 最短の完全中央: CSS Gridの place-items: center
• 垂直中央が効かないときはコンテナの高さ指定を確認