この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:5
ページ更新者:爽健
更新日時:2026-06-11 07:07:02

タイトル: 縦の中央寄せ
SEOタイトル: CSS 縦の中央寄せ完全ガイド（Flexbox / Grid / absolute / table-cell）

この記事の要点
  • 現代の定番: Flexbox: display:flex; align-items:center;
  • もっと簡潔: Grid: display:grid; place-items:center;（縦横両方）
  • 古典: absolute + translate: position:absolute; top:50%; transform:translateY(-50%);
  • テキスト 1 行限定なら line-height: 親の高さ で簡単
  • タグや vertical-align:middle は 限定的にしか効かない（インライン要素 / 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 を切れば文句なし。


  
中央寄せ

子要素が複数あっても全部縦中央に揃います。flex-direction を変えると主軸 / 交差軸が入れ替わる点だけ注意。

方法 2: Grid（最も短い）


  
中央寄せ

place-items: center は align-items: center と justify-items: center のショートハンド。1 行で完結します。

方法 3: absolute + translate（古典）

親に position:relative、子を absolute にして 50% ずらし、自身のサイズ分だけ戻す方法。


  
中央寄せ

方法 4: テーブルセル（IE 対応で使われた）


  
中央寄せ

古いブラウザ対応で使われた手法。Flexbox 普及後は不要です。

方法 5: line-height トリック（1 行テキスト限定）

中央寄せ 1 行テキスト

2 行になると崩れるのが弱点。バッジやボタンラベルなど確実に 1 行のもの限定。

方法 6: margin: auto（Flex 内のみ）


  
中央寄せ

方法 7: モーダル/ダイアログを画面中央に


  
モーダル内容

img / icon を縦中央（インライン）

テキストの真ん中

非推奨:
タグ

HTML4 で deprecated、HTML5 で廃止。CSS で書きましょう:



古い書き方




横中央


縦横中央

よくあるトラブル

  • 親に 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 に統一を。