タイトル: 縦の中央寄せ
SEOタイトル: CSS 縦の中央寄せ完全ガイド（Flexbox / Grid / absolute / table-cell）
| この記事の要点 |
|
結論: 場面別の推奨
| 状況 | 推奨手法 |
|---|---|
| ブロック要素を縦中央寄せ | Flexbox align-items:center |
| 縦も横も中央寄せ | Grid place-items:center |
| テキスト 1 行を縦中央 | line-height: 高さ |
| 絶対配置（モーダル中央） | position:fixed + Flex / translate |
| img の縦中央（インライン） | vertical-align:middle |
| テーブルセル内 | vertical-align:middle（デフォルト） |
方法 1: Flexbox（最も推奨）
2026 年現在、最も汎用的で推奨される方法です。IE11 を切れば文句なし。
<div class="parent">
<div class="child">中央寄せ</div>
</div>
<style>
.parent {
display: flex;
align-items: center; /* 縦中央 */
justify-content: center; /* 横中央（任意） */
height: 300px;
background: #f0f0f0;
}
.child {
background: #4caf50;
color: white;
padding: 1em 2em;
}
</style>子要素が複数あっても全部縦中央に揃います。flex-direction を変えると主軸 / 交差軸が入れ替わる点だけ注意。
方法 2: Grid（最も短い）
<div class="parent">
<div class="child">中央寄せ</div>
</div>
<style>
.parent {
display: grid;
place-items: center; /* 縦も横も中央 (= align-items + justify-items) */
height: 300px;
}
</style>place-items: center は align-items: center と justify-items: center のショートハンド。1 行で完結します。
方法 3: absolute + translate（古典）
親に position:relative、子を absolute にして 50% ずらし、自身のサイズ分だけ戻す方法。
<div class="parent">
<div class="child">中央寄せ</div>
</div>
<style>
.parent {
position: relative;
height: 300px;
background: #f0f0f0;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 旧手法: 子のサイズを固定して margin で戻す
width: 200px; height: 100px;
margin-top: -50px; margin-left: -100px; */
}
</style>方法 4: テーブルセル（IE 対応で使われた）
<div class="parent">
<div class="child">中央寄せ</div>
</div>
<style>
.parent {
display: table;
width: 100%;
height: 300px;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>古いブラウザ対応で使われた手法。Flexbox 普及後は不要です。
方法 5: line-height トリック（1 行テキスト限定）
<div class="parent">中央寄せ 1 行テキスト</div>
<style>
.parent {
height: 80px;
line-height: 80px; /* 親の height と同じ値 */
text-align: center;
}
</style>2 行になると崩れるのが弱点。バッジやボタンラベルなど確実に 1 行のもの限定。
方法 6: margin: auto（Flex 内のみ）
<div class="parent">
<div class="child">中央寄せ</div>
</div>
<style>
.parent {
display: flex;
height: 300px;
}
.child {
margin: auto; /* Flex コンテナの中で縦横中央 */
}
</style>方法 7: モーダル/ダイアログを画面中央に
<div class="modal-backdrop">
<div class="modal">モーダル内容</div>
</div>
<style>
.modal-backdrop {
position: fixed;
inset: 0; /* top:0; right:0; bottom:0; left:0; */
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
}
.modal {
background: white;
padding: 2em;
border-radius: 8px;
max-width: 500px;
width: 90%;
}
</style>img / icon を縦中央（インライン）
<p>テキストの<img src="icon.svg" style="vertical-align:middle">真ん中</p>
<!-- アイコンとテキストを縦中央 -->
<button>
<span class="icon">▶</span>
<span>再生</span>
</button>
<style>
button {
display: inline-flex;
align-items: center;
gap: 0.5em;
}
</style>非推奨: タグ
HTML4 で deprecated、HTML5 で廃止。CSS で書きましょう:
<!-- ❌ 廃止 -->
<center>古い書き方</center>
<!-- ✅ CSS で -->
<div style="text-align:center">横中央</div>
<div style="display:grid;place-items:center;min-height:100vh">縦横中央</div>よくあるトラブル
- 親に height が無いと縦中央にならない → 親に
height:300pxやmin-height:100vhを明示 - body 全体を中央にしたい →
html, body { height: 100%; margin: 0; }+ Flex/Grid - align-items:center が効かない → 親が
display:flex/gridになっているか確認 - 絶対配置で中央寄せが崩れる → translate の数値（-50%）が子のサイズに対する相対だと理解
ブラウザ対応
| 手法 | IE11 | モダンブラウザ |
|---|---|---|
| Flexbox | 制限あり（バグ多） | 完全対応 |
Grid place-items | 非対応 | 完全対応 |
| absolute + translate | 対応 | 対応 |
| table-cell | 対応 | 対応 |
FAQ
Q: 縦も横も中央にしたい一番短い書き方は？
A: display:grid; place-items:center; の 2 行。
Q: なぜ vertical-align: middle がブロック要素で効かない？
A: vertical-align はインラインレベル要素と table-cell でしか効かない仕様だからです。ブロック要素には Flex / Grid を使ってください。
Q: IE11 対応が必要
A: Flexbox の縦中央は IE11 でもおおむね動きます（バグ多めですが）。Grid は IE11 では使えないので Flex に統一を。