CSS 中央寄せの方法｜横・縦・上下左右の早見表と実測結果15パターン

CSSの中央寄せは、「何を（テキストか箱か）」と「どの方向に（横・縦・両方）」の2つを決めれば、使うプロパティが1つに決まります。 迷ったら、親に display: grid; place-items: center; を書くのがいちばん短く、上下左右の中央がそろいます。

この記事では、よく使う中央寄せの方法を「何を×どの方向」で引ける早見表にまとめ、すべてのパターンを Chromium 141（Playwright 1.56）で描画し、子要素の左右・上下の余白を getBoundingClientRect() で実測した数値 といっしょに紹介します。左右の余白が同じなら横中央、上下の余白が同じなら縦中央、と数字で確かめられます。さらに「中央にならない」ときによくある原因を実際に再現し、直す前と後を並べました。

CSS 中央寄せの早見表

まずはこの表で、自分のケースに合う1行を探してください。 書く場所（親／子）に注意すると、ほとんどの「効かない」は防げます。

判断の早見（どれを選ぶか）

実測結果：15パターンの余白を数値で確認

検証条件：親 300×200px（box-sizing: border-box、余白0）、子 100×60px（テキストは文字の範囲を Range.getBoundingClientRect() で測定）。ビューポート 800×600、Chromium 141.0.7390.37（Playwright 1.56.0）。L/R/T/B は親の左・右・上・下の辺から子までの距離（px）です。

上下左右の中央（L=R かつ T=B）になったのは、3〜11・15と <dialog> でした。 #10・#11の上下が1px違うのは、テキストの字面の高さ（17px）が行の高さの中で上下均等にならない（フォントの上下の余白が違う）ためで、行ボックスとしては中央です。

横の中央寄せ

テキスト・インライン要素を横中央にする（text-align）

text-align: center は親に書き、親の中の「文字や inline 要素」を中央に寄せます。 子の div そのものは動きません。

<div class="parent">
  <span>中央のテキスト</span>
</div>

.parent {
  text-align: center;
}

実測（#1）：L=94 / R=94。文字の範囲が左右均等になりました。

ブロック要素を横中央にする（margin-inline: auto）

幅を指定したブロック要素は、左右の margin を auto にすると横中央になります。 margin-inline: auto は margin-left: auto; margin-right: auto; と同じ意味の新しい書き方（論理プロパティ）で、縦書きでも「行の方向」に効きます。従来の margin: 0 auto でも同じ結果です。

<div class="parent">
  <div class="child"></div>
</div>

.child {
  width: 100px;          /* 幅がないと親いっぱいに広がり、中央かどうか分からない */
  margin-inline: auto;
}

実測（#2）：L=100 / R=100。

幅を中身に合わせて横中央にする（fit-content）

ボタン風の要素のように「幅は中身なり、位置は中央」にしたいときは width: fit-content と組み合わせます。

.badge {
  width: fit-content;
  margin-inline: auto;
}

実測（#12）：中身の幅 112px に縮み、L=94 / R=94。inline-block にして親に text-align: center を書く方法（#14）でも同じように中央（L=100 / R=100）になりますが、inline-block は文字と同じ「行の中の要素」として扱われ、親の text-align や line-height の影響を受けます。ブロックのまま扱える fit-content のほうが意図が読みやすいです。

画像を横中央にする

img は初期状態で inline 要素なので、display: block にしてから margin-inline: auto を使います。

img.center {
  display: block;
  margin-inline: auto;
}

実測（#13）：L=100 / R=100。親に text-align: center を書く方法でも中央になります。

縦の中央寄せ

ブロック要素のまま縦中央にする（align-content: center）

親が普通のブロック要素でも、align-content: center で中身を縦中央に寄せられます。 以前はフレックス・グリッドでしか効きませんでしたが、ブロックコンテナへの対応が Chrome 123・Firefox 125・Safari 17.4（2024年）でそろい、主要ブラウザで使えるようになりました。MDN の align-content ページでも「適用対象：ブロックコンテナ、段組みコンテナ、フレックスコンテナ」と記載されています。

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  height: 200px;           /* 縦の余白を作るため高さが必要 */
  align-content: center;   /* 縦中央 */
}
.child {
  width: 100px;
  height: 60px;
  margin-inline: auto;     /* 横中央 */
}

実測（#7）：L=100 / R=100 / T=70 / B=70。レイアウト方式（display）を変えないので、子の幅やマージンの相殺など、ブロック要素のふるまいをそのまま保てます。 古いブラウザにも対応が必要な場合は、次の Flexbox / Grid を使います。

1行のテキストを縦中央にする（line-height）

1行と決まっているテキストなら、line-height を親の高さと同じにすると縦中央になります。

.label {
  height: 200px;
  line-height: 200px;
  text-align: center;
}

実測（#10）：T=91 / B=92。ただし2行になると行の高さも2倍になり、はみ出します（後述のチェックリスト参照）。

表のセルで縦中央にする（vertical-align: middle）

vertical-align が縦中央に効くのは、表のセル（td / display: table-cell）と inline 要素の行内の位置合わせだけです。

.cell {
  display: table-cell;
  width: 300px;
  height: 200px;
  vertical-align: middle;
  text-align: center;
}

実測（#11）：L=94 / R=94 / T=91 / B=92。

上下左右の中央寄せ

Grid の place-items: center（いちばん短い）

親に2行書くだけで、子のサイズを知らなくても上下左右の中央になります。 place-items は align-items（縦）と justify-items（横）をまとめて書くショートハンドです。

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  display: grid;
  place-items: center;
  height: 200px;
}

実測（#5）：L=100 / R=100 / T=70 / B=70。

place-items と place-content の違い（子が複数のとき）

子が1つなら同じ結果ですが、子が複数あると並び方が変わります。 100×40px の子を2つ入れて測りました。

.items   { display: grid; place-items: center; }   /* 各セルの中で中央 */
.content { display: grid; place-content: center; } /* 行のかたまりごと中央 */

「複数の要素をひとまとめに中央」なら place-content、「各マスの中で中央」なら place-items と覚えると迷いません。

Flexbox の justify-content ＋ align-items

横に並べる要素を中央に集めたいときは Flexbox が自然です。 justify-content が主軸（初期値は横）、align-items が交差軸（初期値は縦）を担当します。

.parent {
  display: flex;
  justify-content: center; /* 横 */
  align-items: center;     /* 縦 */
  height: 200px;
}

実測（#3）：L=100 / R=100 / T=70 / B=70。

flex-direction: column にすると軸が入れ替わり、justify-content が縦、align-items が横を担当します（#15、同じく 100/100/70/70）。

Flexbox で子に margin: auto

親を flex にすれば、子の margin: auto が上下左右すべてに効きます。 通常のブロックでは上下の auto は 0 扱いですが、flex アイテムでは余った空間を均等に分けます。

.parent { display: flex; height: 200px; }
.child  { margin: auto; }

実測（#4）：L=100 / R=100 / T=70 / B=70。

position: absolute ＋ inset: 0 ＋ margin: auto

重ねて配置する要素は、inset: 0（上下左右0）と margin: auto の組み合わせで中央になります。 子に幅と高さが必要です。

.parent {
  position: relative;  /* 基準にする */
}
.child {
  position: absolute;
  inset: 0;            /* top/right/bottom/left: 0 のショートハンド */
  margin: auto;
  width: 100px;
  height: 60px;
}

実測（#8）：L=100 / R=100 / T=70 / B=70。

position: absolute ＋ transform: translate(-50%, -50%)

子の幅・高さが決まっていないときは、top/left: 50% で左上の角を中央に置き、translate(-50%, -50%) で自分の半分だけ戻します。

.parent { position: relative; }
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

実測（#9）：L=100 / R=100 / T=70 / B=70。translate の % は「親」ではなく「自分自身」のサイズ基準なので、中身の大きさが変わっても中央に保たれます。

画面中央のモーダルを作る

ブラウザ標準の <dialog> は、showModal() で開くと既定のスタイルで画面中央に表示されます。

<dialog id="dlg">
  <p>保存しますか？</p>
  <form method="dialog"><button>閉じる</button></form>
</dialog>
<button onclick="document.getElementById('dlg').showModal()">開く</button>

実測（200×100 の dialog、ビューポート 800×600）：L=300 / R=300 / T=250 / B=250。

自作する場合は、背景を画面いっぱいに固定して grid で中央にします。

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 0.4);
}
.modal {
  width: 320px;
  height: 180px;
  background: #fff;
}

実測（800×600 の画面）：.modal の位置は left 240 / top 210 で、(800−320)÷2＝240、(600−180)÷2＝210 と一致しました。

中央寄せが効かないときのチェックリスト

「効かない」の多くは、書く場所（親か子か）・要素の種類・高さの3つで説明できます。 以下はすべて実際に描画して確認した結果です。

F3：親に高さがない（直す前と後）

縦中央は「縦に余った空間」を分ける仕組みなので、親に高さがないと分ける余白がありません。

/* 直す前：親の高さは中身なり（60px）で、縦中央の効果が見えない */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 直した後：高さを与える */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;   /* 画面全体なら min-height: 100dvh; */
}

画面全体の中央に置きたいときは、height: 100% を祖先すべてに書くより min-height: 100dvh のほうが確実です（dvh はスマホのアドレスバーの出入りに合わせて変わる画面の高さの単位）。

子が親より大きいときは safe center

Flexbox の justify-content: center は、子が親より大きいと左右に均等にはみ出します。 左側にはみ出した部分はスクロールしても見えません。幅400px（縮まない設定）の子を幅300pxの親に入れて測りました。

.parent {
  display: flex;
  justify-content: safe center; /* 入りきらないときは先頭寄せに切り替わる */
  align-items: center;
}

横スクロールするリストや、画面幅によって中身があふれるヘッダーでは safe center か margin: auto を選ぶと安心です。

方法ごとの比較表

よくある質問

Q. div を上下左右の中央に置く、いちばん簡単な書き方は？ A. 親に display: grid; place-items: center; と、縦の余白を作るための高さ（min-height など）を書く方法です。子の幅・高さを知らなくても中央になります。実測でも L=R=100、T=B=70 でした。

Q. margin: 0 auto と margin-inline: auto は何が違いますか？ A. 横書きでは結果は同じです。margin: 0 auto は上下の margin も 0 に上書きしますが、margin-inline: auto は左右（行の方向）だけを指定するので、上下の margin を別に残せます。新しく書くなら意図が明確な margin-inline: auto がおすすめです。

Q. Flexbox と Grid、中央寄せにはどちらを使えばいいですか？ A. 要素が1つ（または1かたまり）なら Grid の place-items、横に並べる要素を中央に集めるなら Flexbox が書きやすいです。レイアウト全体を変えたくない場合は、ブロックのまま使える align-content: center も選べます。

Q. transform: translate(-50%, -50%) で文字がぼやけることはありますか？ A. 子のサイズが奇数pxだと半ピクセルの位置になり、環境によって文字がわずかににじんで見えることがあります。気になる場合は、Grid の place-items か inset: 0; margin: auto に置き換えると、整数位置に置かれやすくなります。

まとめ

• 中央寄せは「何を×どの方向」で決める。テキストは親に text-align、幅のある箱は子に margin-inline: auto。
• 上下左右なら親に display: grid; place-items: center が最短。複数の子をまとめるなら place-content。
• ブロック要素のままでも align-content: center で縦中央にできる（2024年に主要ブラウザ対応）。
• 重ね配置は inset: 0; margin: auto（サイズ必要）か translate(-50%, -50%)（サイズ不要）。親に position: relative を忘れない。
• 縦中央が効かないときは、まず親の高さを確認する。画面全体なら min-height: 100dvh。
• 子が親より大きくなるなら safe center で左端の見切れを防ぐ。

株式会社RJCでは、こうしたレイアウトの小さな「なぜ？」を実際に手を動かして確かめ、プロジェクトの中で仲間と共有しています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。