CSSのFlexboxで中央寄せする方法｜横方向・縦方向・上下中央を完全解説

「ボタンを真ん中に置きたいだけなのに、なぜか左に寄ったまま動かない……」
「margin: auto;を書いたのに無視されるし、縦の中央寄せにいたってはやり方すらわからない！」

CSSを書き始めたばかりの頃、誰もが一度は「要素が思い通りに中央に寄ってくれない」という問題に直面し、パソコンの前で頭を抱えます。これまでの古いCSSの仕様では、横の中央寄せと縦の中央寄せで全く異なるプロパティを使う必要があり、それが混乱の最大の原因でした。

しかし、現代のWeb制作には 「Flexbox（フレックスボックス）」 という非常に強力な味方がいます。

Flexboxを使えば、わずか3行のコードを書くだけで、初心者にとって最大の壁だった「上下左右の完全中央寄せ」が驚くほど簡単に実現できます。この記事では、Flexboxによる中央寄せの手法を、仕組みの図解や「動かないときのチェックリスト」を交えて徹底解説します！

Flexboxで中央寄せする基本
justify-contentとalign-itemsの違い
中央寄せできない原因と対処法
1. 原因①：親要素の「高さ」が指定されていない（縦中央の罠）
2. 原因②：display: flexを親要素に書いていない
Flexboxでよく使う中央寄せパターン（実務編）
Flexboxとmargin:autoの違い
1. margin:auto が向いている場面
2. Flexbox が向いている場面
Flexboxを使うメリット
よくあるNG例：中級者への入口で犯しがちなミス
1. NG例①：justify-itemsプロパティを使ってしまう
2. NG例②：align-contentと間違える
実務でGrid（グリッド）を使う場合もある
まとめ：小さなコードから実験してみよう

Flexboxで中央寄せする基本

Flexboxを使って中央寄せを行うときの鉄則は、「動かしたい要素（子要素）ではなく、それらを包んでいる親要素（コンテナ）に命令を書く」ということです。

まずは、最も基本となる3つのパターン（横・縦・上下左右）の書き方を見ていきましょう。

横方向の中央寄せ（水平中央）

要素を左右の真ん中に配置したいときは、親要素に display: flex; と justify-content: center; を指定します。

.flex-container {
  display: flex;
  justify-content: center; /* これが横方向の中央寄せ命令 */
}

これまでブロック要素の横中央寄せで使っていた margin: 0 auto; や、インライン要素に使っていた text-align: center; の代わりに、これらをすべて共通の1つの命令で完結させることができます。テキスト、ボタン、画像、あるいは複数の四角いボックスなど、中身が何であっても一発で横方向の真ん中に並びます。

縦方向の中央寄せ（垂直中央）

初心者にとって「最大の壁」と言われるのが、この縦方向の中央寄せです。Flexboxでは、親要素に display: flex; と align-items: center; を指定するだけで解決します。

.flex-container {
  display: flex;
  align-items: center; /* これが縦方向の中央寄せ命令 */
  height: 200px;       /* 縦に動くための「高さ」が必要 */
}

従来のCSSでは、縦の中央寄せをするために line-height を駆使したり、 position: absolute で複雑な位置計算をしたりする必要があり、これが崩れの原因になっていました。Flexboxの登場によって、ようやく「親要素の高さに対して、自動で計算して真ん中に置く」ことが1行でできるようになりました。

上下左右を中央寄せする方法（完全中央）

横中央の命令（justify-content）と、縦中央の命令（align-items）の2つを組み合わせれば、Webデザインで頻出する「上下左右の完全中央寄せ」が完成します。

.flex-container {
  display: flex;
  justify-content: center; /* 左右の真ん中 */
  align-items: center;     /* 上下の真ん中 */
  height: 300px;           /* 親要素に高さを十分に持たせる */
}

この「display: flex」「justify-content: center」「align-items: center」の3点セットは、Webエンジニアが「1日に10回は書く」と言われるほど超重要な鉄板コードです。必ずセットで暗記してしまいましょう。

justify-contentとalign-itemsの違い

「どっちが横で、どっちが縦だっけ？」
Flexboxを使い始めた人が必ず一度は起こす混乱がこれです。この2つのプロパティの役割を、脳内に完全に定着させるためのコツを解説します。

justify-contentは「横方向」（主軸）

justify-contentは、要素が並ぶ方向（デフォルトでは左から右への横ライン）に沿って、どのように要素を配置するかを決めるプロパティです。これを専門用語で「主軸（Main Axis）の調整」と呼びます。

値を center にすれば中央に寄りますし、 space-between にすれば均等に広がります。まずは「要素が流れるメインの軸をコントロールするもの」と覚えてください。

align-itemsは「縦方向」（交差軸）

align-itemsは、要素が並ぶ方向と「直角に交わる方向」（デフォルトでは上から下への縦ライン）の配置を決めるプロパティです。これを「交差軸（Cross Axis）の調整」と呼びます。

要素の「高さ方向のトレイ」の中で、上端に揃えるのか、あるいは真ん中に揃える（center）のかを決めるために使用します。

図解イメージで覚えるコツ

文字だけで覚えようとすると忘れてしまうので、以下の物理的なイメージ（比喩）で頭に叩き込みましょう。

justify-content（横移動）のイメージ：「電車の座席シートに座っている人たちを、左端に寄せるか、右端に寄せるか、真ん中にキュッと集める（center）か」という、横一列の移動です。
align-items（高さ方向）のイメージ：「身長がバラバラの子供たちを横一列に並べるときに、頭のてっぺんの水平線を揃えるのか、足元を揃えるのか、おへその位置（center）で高さを揃えるのか」という、縦の軸の調整です。

「メインの流れを整えるのがjustify-content」「その流れに対する高さを揃えるのがalign-items」とイメージできるようになれば、もう迷うことはありません。

中央寄せできない原因と対処法

コードを正しく書いたつもりなのに、なぜか真ん中に動いてくれない。そんな時にチェックすべき、実務でよくある「3大原因」です。

原因①：親要素の「高さ」が指定されていない（縦中央の罠）

縦の中央寄せ（align-items: center）が効かない原因の9割がこれです。
CSSにおいて、親要素（divなど）はデフォルトで「中身の子要素と同じ高さ」にしかなりません。つまり、親要素の中に上下の「余白（スペース）」が全くない状態です。動くための隙間がないため、ブラウザは中央寄せをすることができません。

対処法：
親要素に対して、height: 300px; や min-height: 100vh; （画面全体の高さ）などの明示的な高さを指定して、上下に動けるだけのスペースを作ってあげてください。

原因②：display: flexを親要素に書いていない

Flexboxの命令は、すべて「親要素にdisplay: flex;がかかっていること」が大前提です。
justify-content: center;だけをポツンと書いても、ブラウザは「これは何のレイアウトモードの話だ？」と困惑して無視してしまします。

Flexboxは「親が子をコントロールする」という主従関係のルールで動いています。

対処法：
動かしたい要素の「1つ外側のタグ（親）」にクラス名をつけ、そこにFlexboxのプロパティを記述してください。

Flexboxでよく使う中央寄せパターン（実務編）

ここからは、実際のWeb制作現場のコード（コンポーネント）に落とし込んだ、そのまま使える実践的なパターン集です。

ボタンを中央寄せする

例えば、ブログ記事の末尾にある「詳しくはこちら」のようなボタンを、ページの中央にぽつんと配置するパターンです。

HTML

<div class="button-wrapper">
  <a href="#" class="btn">お問い合わせはこちら</a>
</div>

CSS

.button-wrapper {
  display: flex;
  justify-content: center; /* 横方向の真ん中に寄せる */
  padding: 40px 0;
}

.btn {
  display: inline-block;
  padding: 15px 30px;
  background-color: #0077b6;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

【関連記事】

「CSSの中央寄せができない原因は？margin・flex・gridの違いと使い分けを解説」

カードUIの中身を中央寄せする

サービスの機能紹介などでよく見かける「アイコン・タイトル・説明文」がすべてのカードの中で中央に揃っているデザインです。これを実装するには、Flexboxの並ぶ向きを「縦（flex-direction: column）」に切り替えます。

HTML

<div class="card">
  <div class="card-icon">💡</div>
  <h3 class="card-title">アイディアを形に</h3>
  <p class="card-text">あなたの思い描いたデザインを、美しいコードで構築します。</p>
</div>

CSS

.card {
  display: flex;
  flex-direction: column;  /* 並ぶ向きを「上から下（縦）」に変更 */
  justify-content: center; /* 向きが縦になったため、これが「縦中央」の意味になる */
  align-items: center;     /* 向きが縦になったため、これが「横中央」の意味になる */
  width: 300px;
  height: 350px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 20px;
  text-align: center;      /* 文字そのものも中央に揃える */
}

解説：
flex-direction: column;を指定すると、主軸と交差軸が「90度回転」します。そのため、justify-contentとalign-itemsの縦横の役割が入れ替わるという点に注意してください。

ローディング画面を画面のど真ん中に表示する

ページを読み込んでいる間に、画面全体を薄暗くして、その真ん中にくるくる回るアイコンを出す「全画面中央配置」のパターンです。

HTML

<div class="loader-overlay">
  <div class="spinner"></div>
</div>

CSS

.loader-overlay {
  position: fixed;         /* 画面に対して固定配置 */
  top: 0;
  left: 0;
  width: 100%;             /* 画面いっぱいの横幅 */
  height: 100vh;           /* 画面いっぱいの高さ */
  background-color: rgba(255, 255, 255, 0.8);
  
  /* Flexboxで完全中央寄せ */
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #0077b6;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

Flexboxとmargin:autoの違い

「中央寄せならmargin: auto;でもできるのに、なんでわざわざFlexboxを使うの？」という疑問に対する回答です。これらには明確な「得意分野」があります。

margin:auto が向いている場面

ページ全体のコンテンツ幅の制限：「サイト全体のコンテンツ幅を最大1200pxにして、画面の左右中央にどっしり配置したい」という時です。本人がブロック要素であれば、margin: auto;を書くだけで解決するため、Flexboxを持ち出すまでもありません。

Flexbox が向いている場面

縦方向（上下）の中央寄せが必要なとき
中身の要素が複数あり、それらを並べながら中央寄せしたいとき
中身の要素のサイズ（幅や高さ）がバラバラで、自動で計算させたいとき

一言で言えば、「単一の大きな箱を真ん中に置くだけならmargin: auto」「箱の中身のレイアウトや、複雑な上下中央を行いたいならFlexbox」という使い分けになります。

【関連記事】

Flexboxを使うメリット

現代のフロントエンド開発において、Flexboxを使わない選択肢はありません。その理由は大きく3つあります。

コードが圧倒的にシンプルになる：
古いCSSのハック技（positionやマイナスマージンを使った複雑な計算など）が一切不要になり、コードの行数が激減します。
レスポンシブ対応（スマホ対応）が劇的に楽になる：
画面幅が狭くなっても、Flexboxが自動で余白を再計算して中央を維持してくれます。
実務でのシェア率が圧倒的：
現在制作されているほぼすべてのWebサイトのコンポーネント（ナビゲーション、ボタン、カードなど）にFlexboxが使われています。覚えた瞬間に即、実戦で使えます。

よくあるNG例：中級者への入口で犯しがちなミス

Flexboxに少し慣れてきた人が、知識が混ざってやってしまいがちな「動かないNGコード」をまとめました。

NG例①：justify-itemsプロパティを使ってしまう

「justify-contentがあるなら、justify-items: center;も効くはず」と思って書いてしまうケースです。
残念ながら、Flexboxにおいてjustify-itemsというプロパティは存在しない（無視される）という仕組みになっています。これは次に解説する「CSS Grid」で使うプロパティですので、混同しないようにしましょう。

NG例②：align-contentと間違える

align-itemsと非常によく似た名前のプロパティに、align-contentがあります。

align-items：要素が「1行」のとき、その行の中での縦の配置を決める。
align-content：要素が複数行に折り返したとき（flex-wrap: wrapのとき）、その「行同士の隙間」をどう詰めるかを決める。

要素が1行しかないのにalign-content: center;を指定しても、ブラウザには何も変化が起きません。基本はalign-itemsを使うと覚えておきましょう。

実務でGrid（グリッド）を使う場合もある

ここまでの解説を読むと「中央寄せはすべてFlexboxでいいのでは？」と思うかもしれません。しかし、現場では、状況に応じて 「CSS Grid」 というもう1つの強力な手法と使い分けています。

例えば、「要素を1つだけ、エリアの完璧な上下左右中央に、最も短いコードで配置したい」という場合、CSS Gridを使うと、わずか2行で完結します。

.grid-container {
  display: grid;
  place-items: center; /* これだけで上下左右中央になります */
  height: 300px;
}

「並び順やレスポンシブでの柔軟な調整（1列から2列への変化など）が必要なときは Flexbox」、「単純な1つのパーツのど真ん中配置や、最初からグリッド状のマス目が決まっているレイアウトは Grid」というように、2つを適材適所で使い分けて、スマートなコードを書いていきます。

まとめ：小さなコードから実験してみよう

最後に、今回の最も重要なポイントを振り返りましょう。

横方向の真ん中 → 親要素にjustify-content: center;
縦方向の真ん中 → 親要素にalign-items: center;
（※親の高さの指定を忘れずに！）
上下左右のど真ん中 → 上記の2つをセットで親要素に書く。

CSSは、教科書を読んでいるだけではなかなか身につきません。まずはご自身のエディタで、1つのdivの中に小さなボタンを1つだけ作り、今回紹介したプロパティを1行ずつ追加してみてください。ブラウザ上で要素がピタッと真ん中に移動する瞬間を自分の目で確認することこそが、一番の近道です。