【2026年版】CSS中央寄せの完全ガイド｜横・縦・上下左右をコピペで一発センタリング

2026年7月14日

「CSSで要素を中央に寄せたいのに、なぜかずれる」「flexboxを使っているのに縦方向が中央にならない」——こうした悩みは、Web制作を始めたばかりの人が必ずといっていいほどぶつかる壁です。CSSの中央寄せは、一見シンプルに見えて、横か縦か・ブロック要素かインライン要素かによって使うプロパティが変わります。

この記事では、2026年現在のモダンCSS手法を中心に、水平・垂直・上下左右の完全中央寄せを網羅的に解説します。flexbox・grid・margin・position・text-alignと、状況別にコピペできる完全なサンプルコードを添えてまとめました。「どの手法をいつ使えばいいかわからない」という方も、記事の最後にある早見表を見れば一発で判断できるようになります。

初心者の方も、既に中央寄せの基本を知っているがより体系的に整理したい中級者の方も、ぜひ手元に置いておくリファレンスとして活用してください。

先に、この記事の結論をまとめます。

水平中央ならflexboxのjustify-content: centerまたはブロック要素ならmargin: 0 autoが最もシンプル
上下左右完全中央ならflexboxまたはgridで親要素に設定するだけで一発解決
テキスト・インライン要素の中央はtext-align: centerで対応
絶対配置（position: absolute）で中央寄せするときはtransformが最も安全

flexboxで水平中央寄せ（justify-content: center）

flexboxのjustify-content:centerで水平中央寄せする図

flexboxを使った水平中央寄せは、モダンCSSで最もよく使われる手法です。親要素にdisplay: flexとjustify-content: centerを指定するだけで、子要素が主軸（横方向）の中央に並びます。

以下のサンプルをそのままコピーして使えます。

<!-- HTML -->
<div class="container">
  <div class="box">中央寄せしたい要素</div>
</div>

/* CSS */
.container {
  display: flex;
  justify-content: center; /* 水平中央 */
  width: 100%;
  background: #f0f0f0;
  padding: 20px;
}

.box {
  background: #d16176;
  color: #fff;
  padding: 20px 40px;
  border-radius: 4px;
}

justify-contentはflexの主軸（デフォルトでは横方向）に対して子要素の配置を決めます。centerにすると複数の子要素をまとめて中央にまとめることもできます。

複数の子要素がある場合は、子要素同士の間隔をgapプロパティで調整できます。

/* 複数の子要素を等間隔で中央に並べる */
.container {
  display: flex;
  justify-content: center;
  gap: 16px; /* 子要素間のスペース */
}

flexboxで垂直中央寄せ（align-items: center）

垂直方向（縦）の中央寄せにはalign-items: centerを使います。flexboxではjustify-contentが主軸、align-itemsが交差軸を制御します。デフォルトのflex-direction（row）では交差軸は縦方向なので、align-items: centerで垂直中央が実現できます。

親要素に高さが必要な点に注意してください。高さが指定されていないと中央寄せが目に見えません。

<!-- HTML -->
<div class="container">
  <div class="box">垂直中央寄せ</div>
</div>

/* CSS */
.container {
  display: flex;
  align-items: center; /* 垂直中央 */
  height: 300px; /* 高さが必要 */
  background: #EFBDB7;
}

.box {
  background: #51322b;
  color: #fff;
  padding: 20px 40px;
  border-radius: 4px;
}

ヘッダーにロゴとナビゲーションを縦方向で中央に揃えたい場合など、実案件で頻繁に使う手法です。

flexboxで上下左右の完全中央寄せ（コピペ完全コード）

最も使われるパターンが、上下左右すべてを中央に寄せる「完全中央寄せ」です。flexboxではjustify-content: centerとalign-items: centerを両方指定するだけで実現できます。

ローディング画面・モーダルの中身・カード要素の中央配置など、幅広い場面で使います。

<!-- HTML -->
<div class="center-wrap">
  <div class="content">
    <h1>上下左右中央寄せ</h1>
    <p>flexboxで一発解決</p>
  </div>
</div>

/* CSS: コピペで動く完全コード */
.center-wrap {
  display: flex;
  justify-content: center; /* 水平中央 */
  align-items: center;     /* 垂直中央 */
  min-height: 100vh;       /* 画面の高さいっぱい */
  background: #f5f5f5;
}

.content {
  text-align: center;
  background: #fff;
  padding: 40px 60px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

min-height: 100vhを指定すると、コンテンツが少なくても画面全体の高さを確保できます。ローディング画面などで特に有効です。

flex-directionをcolumnにすると主軸と交差軸が入れ替わります。縦に並べながら中央寄せしたい場合は以下のようにします。

/* 縦並びで上下左右中央 */
.center-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 縦方向の中央（columnなので） */
  align-items: center;     /* 横方向の中央 */
  min-height: 100vh;
}

CSS gridで一発中央寄せ（place-items: center）

gridレイアウトではplace-items: centerという1プロパティで上下左右の完全中央寄せができます。place-itemsはalign-itemsとjustify-itemsを一括で設定するショートハンドです。

flexboxより記述量が少なく、特に「1つの要素をど真ん中に置きたい」場面ではgridの方がコードがすっきりします。

<!-- HTML -->
<div class="grid-center">
  <div class="card">gridで中央寄せ</div>
</div>

/* CSS */
.grid-center {
  display: grid;
  place-items: center; /* 上下左右一発中央 */
  min-height: 100vh;
  background: #f0f0f0;
}

.card {
  background: #d16176;
  color: #fff;
  padding: 40px;
  border-radius: 8px;
  font-size: 1.2rem;
}

place-itemsは比較的新しいプロパティですが、2026年現在ではすべての主要ブラウザで対応済みです。IE11のサポートが終了したため、現代のWeb制作では積極的に使える手法です。

複数のセルに対して中央寄せしたい場合はplace-content: centerを使います。

/* 複数セルをまとめて中央に（グリッドトラック全体を中央へ） */
.grid-center {
  display: grid;
  place-content: center;
  gap: 20px;
  min-height: 100vh;
}

margin: 0 autoでブロック要素を水平中央寄せ

margin: 0 autoは、ブロック要素（divやpなど）を水平方向に中央寄せする最もクラシックな手法です。flexboxやgridが普及した現在でも、コンテナの幅を固定して中央に置く用途では現役で使われます。

ただし、この手法には条件があります。対象要素にwidthが指定されていること、かつブロック要素であることが必須です。

<!-- HTML -->
<div class="wrapper">
  <p>コンテンツがここに入る</p>
</div>

/* CSS */
.wrapper {
  width: 800px;     /* widthが必須 */
  max-width: 100%;  /* レスポンシブ対応 */
  margin: 0 auto;   /* 左右を均等に自動計算 */
  padding: 0 20px;  /* 余白を確保 */
}

レスポンシブデザインではmax-widthと組み合わせるのが定番です。width: 800px; max-width: 100%;とすることで、画面幅が800px未満のスマホでは画面幅いっぱいに広がり、PCでは800pxで固定されます。

margin: autoだけでは垂直方向（上下）の中央寄せはできません。垂直中央が必要な場合はflex/gridを使いましょう。

/* よくあるレイアウトのコンテナ設定 */
.container {
  width: 1100px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

text-align: centerでテキスト・インライン要素を中央寄せ

text-align: centerは、テキストやインライン要素・インラインブロック要素を水平中央に寄せるプロパティです。ブロック要素自体は移動させず、その中のコンテンツを中央寄せします。

見出し・テキスト・ボタン（display: inline-blockのもの）などを中央に置くときに使います。

<!-- HTML -->
<div class="section">
  <h2>セクションタイトル</h2>
  <p>テキストが中央に並びます。</p>
  <a href="#" class="btn">ボタン</a>
</div>

/* CSS */
.section {
  text-align: center; /* 子要素のテキストとインライン要素を中央寄せ */
  padding: 60px 20px;
}

.btn {
  display: inline-block; /* inline-blockにすることでtext-alignが効く */
  background: #d16176;
  color: #fff;
  padding: 12px 32px;
  border-radius: 4px;
  text-decoration: none;
}

text-align: centerが効くのはインライン・インラインブロック要素に対してです。display: blockの要素には効きません。ブロック要素を中央にしたい場合はmargin: 0 autoまたはflex/gridを使います。

position + transformで絶対配置の中央寄せ

モーダルウィンドウやポップアップ、フローティングバナーなど「親要素の中央に絶対配置したい」ケースでは、position: absoluteとtransform: translate(-50%, -50%)を組み合わせる手法が定番です。

この手法は要素のサイズが不明・可変の場合でも確実に中央に配置できます。

<!-- HTML -->
<div class="parent">
  <div class="centered">
    <p>モーダルの中身</p>
  </div>
</div>

/* CSS */
.parent {
  position: relative; /* 基準となる親要素 */
  width: 100%;
  height: 400px;
  background: rgba(0,0,0,0.5);
}

.centered {
  position: absolute;
  top: 50%;               /* 上から50%の位置（要素の上端が中央） */
  left: 50%;              /* 左から50%の位置（要素の左端が中央） */
  transform: translate(-50%, -50%); /* 要素の中心が親の中央になるよう補正 */
  background: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

top: 50%; left: 50%だけでは要素の「左上角」が中央に来ます。transform: translate(-50%, -50%)で要素の幅の50%・高さの50%分だけずらすことで、要素の「中心」が親の中央に来ます。

画面全体の中央に固定表示する場合はposition: fixedを使います。

/* 画面全体の中央に固定表示（モーダル等） */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background: #fff;
  padding: 40px;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
}

手法の使い分け早見表

状況に応じて使うべき手法が変わります。下の早見表で、どのケースにどの手法を使えばいいかを一覧で確認できます。

やりたいこと	推奨手法	CSSプロパティ
ブロック要素を水平中央（幅固定）	margin auto	`margin: 0 auto` + `width`指定
テキスト・ボタンを水平中央	text-align	`text-align: center`
子要素を水平中央（flex）	flexbox	`display: flex; justify-content: center`
子要素を垂直中央（flex）	flexbox	`display: flex; align-items: center`
上下左右の完全中央（flex）	flexbox	`display: flex; justify-content: center; align-items: center`
上下左右の完全中央（grid・最短）	grid	`display: grid; place-items: center`
絶対配置で親の中央に	position + transform	`position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%)`
画面全体の中央に固定表示	position: fixed + transform	`position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%)`

よくある失敗と対処法

失敗1：margin: 0 autoを指定してもwidthがないので効かない

margin: 0 autoはwidthが指定されていないブロック要素には効きません。デフォルトで親要素の幅100%を占めるため、「左右に余白がない＝中央寄せ不要」と判断されます。

/* NG: widthなしはmargin: autoが効かない */
.box {
  margin: 0 auto; /* ← widthを指定しないと意味がない */
}

/* OK: widthを指定する */
.box {
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
}

失敗2：flexboxを使っているのに垂直中央にならない（高さが未指定）

align-items: centerを指定しても、親要素の高さが指定されていなければ垂直中央は意味をなしません。親の高さがコンテンツと同じであれば、「中央」に置いても変化がないからです。

/* NG: 親に高さがない */
.parent {
  display: flex;
  align-items: center; /* 高さがないと効果が見えない */
}

/* OK: 高さを明示する */
.parent {
  display: flex;
  align-items: center;
  height: 400px; /* または min-height: 100vh など */
}

失敗3：text-align: centerがdisplay: blockの子要素に効かない

text-align: centerはインライン・インラインブロック要素にしか効きません。display: blockの要素（divなど）には効かないため、ブロック要素を中央寄せしたい場合はmargin: 0 autoかflex/gridを使います。

/* NG: display:blockの子要素にはtext-alignが効かない */
.parent {
  text-align: center;
}
.child {
  display: block; /* ← ブロック要素なのでtext-alignは無効 */
  width: 200px;
}

/* OK: インラインブロックにする */
.child {
  display: inline-block; /* これでtext-align: centerが効く */
  width: 200px;
}

失敗4：position: absoluteで親にposition: relativeが設定されていない

position: absoluteの要素は、最も近い「position: static以外の祖先要素」を基準に配置されます。親要素にposition: relativeがないと、思わぬ祖先要素（bodyなど）を基準にしてしまいます。

/* NG: 親にpositionが設定されていない */
.parent {
  /* position指定なし ← bodyやhtml等が基準になってしまう */
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* OK: 親にposition: relativeを設定 */
.parent {
  position: relative; /* ← これが基準になる */
  height: 400px;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

失敗5：スマホで中央寄せが崩れる（box-sizingの問題）

widthとpaddingが合わさって要素の幅が親を超えてしまい、中央寄せが崩れるケースです。box-sizing: border-boxを設定することでpaddingをwidth内に収めることができます。

/* 全要素にbox-sizingを適用（リセットCSSとして先頭に記述） */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.box {
  width: 100%;
  padding: 20px; /* border-boxなのでwidthに含まれる */
  margin: 0 auto;
}

よくある質問（FAQ）

Q1. flexboxとgridのどちらを中央寄せに使えばいいですか？

1つの要素をシンプルに中央に置くだけならdisplay: grid; place-items: centerがコードが最も短くてすっきりしています。複数の子要素を横・縦に並べながら中央寄せしたい場合や、細かい配置制御が必要な場合はflexboxが向いています。2026年現在はどちらも主要ブラウザで完全対応しているため、チームの書き方に合わせて選んで問題ありません。

Q2. 縦方向の中央寄せがどうしてもうまくいきません。チェックポイントは？

縦方向（垂直）の中央寄せが効かない原因の大半は「親要素に高さが設定されていない」ことです。align-items: centerやplace-items: centerを指定しても、親の高さがコンテンツと同じであれば見た目に変化が出ません。親要素にheightまたはmin-heightを明示することを確認してください。

Q3. インラインのsvgアイコンをテキストと縦方向に揃える方法は？

インライン要素（svgやimg）とテキストを縦方向に揃えるにはvertical-align: middleが手軽です。ただし現代的な書き方では、親要素をflexにしてalign-items: centerを指定する方法が制御しやすくおすすめです。

/* アイコンとテキストを横並び・縦中央 */
.icon-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

Q4. 画像を親DIVの中央に置くにはどうすればいいですか？

親要素をflexまたはgridにするのが最もシンプルです。display: flex; justify-content: center; align-items: centerで画像を上下左右の中央に置けます。imgタグ自体はインライン要素なので、display: block; margin: 0 autoでも水平中央にできます。

/* 方法1: 親をflexにする */
.img-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 方法2: imgをブロックにしてmargin: auto */
img {
  display: block;
  margin: 0 auto;
}

Q5. position: absoluteで中央にしたい要素のサイズが変動する場合はどうしますか？

サイズが固定でない場合もtransform: translate(-50%, -50%)で対応できます。transformは「自身の幅・高さに対するパーセンテージ」で計算されるため、サイズが変わっても常に要素の中心が基準点になります。古い手法のmargin-left: -width/2などは固定サイズが必要でしたが、transformではその制約がありません。

CSS・Webデザイン実装の総まとめ

CSSの実装テクニックを「レイアウト・装飾・アニメーション・基礎・トラブル解決」の目的別に探せる総まとめページを用意しています。実装で迷ったときの索引としてどうぞ。

【CSS実装テクニック完全マップ】コピペで使えるWebデザイン実装ガイド総まとめ

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

期間：1週間
学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！

公式サイトから無料カウンセリングに申し込む →

この記事を書いた人

田中誠

WithCodeでWeb制作を習得後、フリーランスエンジニアとして活動。HTML/CSS・JavaScript・WordPress案件を中心に年間20件以上の制作実績を持つ。「難しい技術をわかりやすく」をモットーに、初心者〜中級者向けの技術記事を執筆。副業・フリーランス独立を目指す方に向けた情報発信に注力している。