本ページはプロモーションが含まれています

CSS Flexboxで中央寄せする最短ルート！上下左右も一瞬で解決【完全ガイド】

公開日

Web制作の現場で「要素をど真ん中に置きたい」という場面、毎日のようにありますよね。昔は margin: 0 auto; や display: table-cell; などを駆使して中央寄せを実装していましたが、今は Flexbox を使えば驚くほど簡単に実現できます。

この記事では、CSS初心者の方でもすぐ使える Flexboxによる中央寄せの基本パターン を、コピペOKのコード付きで解説します。

この記事で解決できること
  • Flexboxを使った「左右中央」の作り方
  • Flexboxを使った「上下中央」の作り方
  • 「上下左右すべてど真ん中」にする最短コード
  • スマホ表示（レスポンシブ）での中央寄せの注意点

Flexboxとは？中央寄せが簡単になるCSSレイアウト

Flexbox（フレックスボックス）とは、CSSで要素を柔軟に配置するためのレイアウト機能です。横並び・中央寄せ・等間隔配置などを、少ないコードで簡単に実装できます。

特に「中央寄せ」はFlexboxの得意分野で、従来のCSSよりもシンプルな記述で実装できるのが特徴です。

1. Flexboxで中央寄せする基本の3つのプロパティ

Flexboxで中央寄せを実現するには、まず親要素に display: flex; を指定します。その上で、以下のプロパティを組み合わせます。

  1. justify-content: center;
    主軸方向（デフォルトでは横方向）に中央寄せ
  2. align-items: center;
    交差軸方向（デフォルトでは縦方向）に中央寄せ
  3. gap: 20px;
    要素同士の間隔を簡単に調整できるプロパティ

2. 【コピペOK】よく使う中央寄せパターン

パターンA：上下左右すべてど真ん中

もっともよく使われる「完全中央配置」のコードです。

/* 親要素に指定 */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #f9f9f9;
}

現場のヒント：上下中央を実現するには、親要素に高さが必要です。高さがない場合は min-height: 100vh; を使うと画面中央に配置できます。

パターンB：横方向（左右）だけ中央寄せ

ナビゲーションメニューやボタン配置など、横方向だけ中央にしたい場合はこちら。

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

パターンC：画像を中央寄せする

画像を中央に配置したい場合もFlexboxが便利です。

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

.parent img{
  max-width:100%;
}

3. スマホ表示（レスポンシブ）での注意点

レスポンシブ対応では、PCでは横並びだった要素をスマホで縦並びにするケースが多いです。その場合、中央寄せの向きが変わる点に注意しましょう。

@media screen and (max-width: 768px) {

  .parent{
    flex-direction: column;
    align-items: center;
  }

}

flex-direction: column; にすると、主軸が縦方向に変わります。そのため、中央寄せの指定方法も変わることがあります。

補足：Flexboxは「1次元レイアウト（横または縦）」を扱うのが得意です。複雑なグリッドレイアウトには CSS Grid を使う方が適している場合もあります。

まとめ：Flexboxを使えば中央寄せは一瞬

Flexboxを使えば、中央寄せはとてもシンプルに実装できます。

  1. 親要素に display:flex;
  2. 横中央 → justify-content:center;
  3. 縦中央 → align-items:center;

この3つを覚えておくだけで、Web制作の多くのレイアウト問題を解決できます。

「CSSの基礎をしっかり固めて、実務で迷わないスキルを身につけたい」という方は、下記よりご連絡お待ちしております！

M相談してみる

ちなみに最近、健康のためにお酒を控えて炭酸水を飲むようにしたのですが、頭がスッキリしてコーディングの集中力が上がった気がします（笑）。

Flexboxをマスターして、中央寄せで悩む時間を減らし、実装スピードをどんどん上げていきましょう！

一覧へ!