CSSでflexを使って上下中央に配置する方法｜縦方向の中央揃えをかんたんに実現！

「ボタンやテキストを画面の上下中央に置きたいのに、うまく真ん中にならない…」

こんな悩みを抱えたことはありませんか？

実はCSSのflex（フレックスボックス）を使えば、上下中央への配置はとてもシンプル。

この記事では、display: flexを使って上下中央に揃える基本的なやり方から、左右中央と組み合わせる方法まで、初心者にもわかりやすく解説します。

flexで上下中央に配置する基本

flexboxの仕組みを理解しよう

flexboxはとても強力なレイアウトツールで、親要素にdisplay: flexを設定するだけで、子要素を簡単に揃えることができます。

flexboxにはメイン軸とクロス軸という2つの軸があります：

メイン軸：要素が並ぶ方向
クロス軸：メイン軸に対して垂直な方向

縦並びで上下中央にする方法

上下中央に配置したい場合は、メイン軸を縦にするflex-direction: columnを使い、justify-content: centerを指定します。

コード例

.container {
  display: flex;
  flex-direction: column; /* 縦並び */
  justify-content: center; /* メイン軸方向の中央（上下中央） */
  height: 400px; /* 高さを指定 */
}

HTML例

<div class="container">
  <h2>タイトル</h2>
  <p>説明文テキスト</p>
  <button>ボタン</button>
</div>

これで、子要素が上下中央に配置されます。

なぜ高さの指定が必要？

heightを指定しないと、コンテナの高さが子要素の高さと同じになってしまい、中央配置の効果が見えません。

具体的な高さ（pxやvh）を指定することで、その範囲内での中央配置が実現されます。

実際の使用例

ロゴとボタンを縦に中央配置

.hero-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh; /* 画面全体の高さ */
  text-align: center;
}

例えば縦並びのロゴとボタンを上下中央に配置したい場合に便利です。

これで基本的な上下中央揃えはバッチリ。次は横方向の中央揃えも加えたやり方を紹介します。

上下＋左右どちらも中央に揃える

完全な中央配置を実現

上下だけでなく、左右も中央にしたい場合はalign-items: centerを追加します。

コード例

.container {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 上下中央 */
  align-items: center;     /* 左右中央 */
  height: 400px;
}

これで上下中央だけでなく、左右も中央に配置されます。

各プロパティの役割

justify-content: center：メイン軸方向（縦並びの場合は上下）の中央
align-items: center：クロス軸方向（縦並びの場合は左右）の中央

実際の活用例

モーダルウィンドウの中央配置

.modal-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
}

ローディングスピナーの配置

.loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

モーダルウィンドウや、中央にローディングスピナーを置きたい場合によく使います。

次はflexの軸を逆にした場合（デフォルトの横並び）に、上下中央に配置する方法を紹介します。

flex-direction: row で上下中央にする方法

横並びレイアウトでの上下中央

flex-direction: row（デフォルト）では、メイン軸は横方向になります。

この場合、上下中央はalign-items: centerを使います。

コード例

.container {
  display: flex;
  align-items: center; /* 上下中央 */
  height: 300px;
}

これで子要素が親要素の高さの中央に揃います。

軸の違いを理解しよう

flex-direction	メイン軸	クロス軸	上下中央のプロパティ
column（縦並び）	縦方向	横方向	`justify-content: center`
row（横並び）	横方向	縦方向	`align-items: center`

実際の使用例

ナビゲーションメニューの配置

.navbar {
  display: flex;
  align-items: center; /* アイテムを上下中央に */
  justify-content: space-between; /* 左右に分散配置 */
  height: 60px;
  padding: 0 20px;
}

アイコンとテキストの組み合わせ

.icon-text {
  display: flex;
  align-items: center;
  gap: 10px; /* アイコンとテキストの間隔 */
}

.icon {
  width: 24px;
  height: 24px;
}

横並びのメニューやアイコンを、上下中央にそろえたいときに使います。

flexは軸の方向によって使うプロパティが変わるので、そこを意識すると自在にレイアウトできます。

よくある質問と解決法

Q. 高さが決まっていないときはどうする？

A. min-heightやvhを活用

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 最低でも画面全体の高さ */
}

Q. 複数の要素をまとめて中央配置したい

A. 子要素をdivでグループ化

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

.content-group {
  text-align: center;
}

<div class="container">
  <div class="content-group">
    <h1>タイトル</h1>
    <p>説明文</p>
    <button>ボタン</button>
  </div>
</div>

Q. flexが効かない場合の対処法

A. よくある原因をチェック

親要素の高さが設定されていない /* NG */ .container { display: flex; justify-content: center; /* height が未設定 */ } /* OK */ .container { display: flex; justify-content: center; height: 400px; /* または min-height */ }
flexプロパティの競合 /* 他のCSSと競合していないか確認 */ .container { display: flex !important; /* 一時的な確認用 */ }

応用テクニック：さらに便利な使い方

ヘッダー・メイン・フッターのレイアウト

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header, .footer {
  flex-shrink: 0; /* 縮まない */
}

.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1; /* 残りのスペースを占有 */
}

レスポンシブ対応

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

@media (max-width: 768px) {
  .container {
    padding: 20px;
    justify-content: flex-start; /* スマホでは上から配置 */
    padding-top: 50px;
  }
}

アニメーション付きの中央配置

.fade-in-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  opacity: 0;
  animation: fadeInCenter 1s ease forwards;
}

@keyframes fadeInCenter {
  to {
    opacity: 1;
  }
}