【CSS】flexboxの子要素を縦方向に中央寄せする基本と例

2026/10/04

flexboxを使うと、子要素の配置を直感的に整えられます。なかでもよく使うのが、子要素を縦方向の中央にそろえる方法です。ヘッダーやカード、ボックス内のテキスト配置など、実務でも出番の多い基本テクニックなので、仕組みと書き方をあわせて押さえておきましょう。

flexboxで縦方向の中央寄せをする基本

flexboxでは、親要素にdisplay: flex;を指定し、縦方向の揃え方を決めるalign-itemsを使います。横方向ではなく縦方向に中央寄せしたい場合は、align-items: center;が基本です。

<div class="box">
  <div class="item">中央に寄せたい要素</div>
</div>

.box {
  display: flex;
  align-items: center;
  height: 200px;
  border: 1px solid #ccc;
}

.item {
  background: #f3f6ff;
  padding: 16px;
}

この例では、親要素の高さを200pxにしているため、子要素が上下のちょうど中央に配置されます。align-itemsは親要素に指定する点が大切です。子要素側に書いても、縦方向の中央寄せにはなりません。

複数の子要素をまとめて中央にそろえる

align-items: center;は、複数の子要素がある場合にも有効です。すべての子要素を同じ基準で縦中央にそろえられるので、ナビゲーションやメニュー、カードの内部レイアウトにも便利です。

<div class="menu">
  <span>アイコン</span>
  <span>テキスト</span>
  <span>補足情報</span>
</div>

.menu {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 80px;
  border: 1px solid #ddd;
  padding: 0 16px;
}

このようにすると、各要素の高さが違っていても、見た目の基準線をそろえやすくなります。gapを組み合わせると、要素間の間隔も整えやすくなります。

横方向も中央にしたい場合はjustify-contentを使う

縦方向の中央寄せだけでなく、横方向も中央にしたいケースは多いです。その場合は、justify-content: center;を追加します。align-itemsは縦方向、justify-contentは横方向、と覚えると分かりやすいです。

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}

これで子要素は上下左右の中央に配置されます。ボタンをページ内で目立たせたいときや、空白の多いエリアで1つの要素をきれいに見せたいときに役立ちます。

うまく中央に寄らないときの確認ポイント

縦中央寄せが効かないときは、次の点を確認してください。

親要素にdisplay: flex;が指定されているか
親要素に高さがあるか
align-itemsを子要素ではなく親要素に書いているか
別のCSSで上書きされていないか

特に見落としやすいのが「高さ」です。親要素に高さがないと、中央寄せしても見た目の変化が分かりにくくなります。また、縦方向の中央寄せは、flex-direction: column;を使っている場合でも考え方は同じですが、軸の向きが変わるため、必要に応じてalign-itemsとjustify-contentの役割を整理して使い分けるとよいでしょう。