この記事の要点

現代の定番: Flexbox: display:flex; align-items:center; もっと簡潔: Grid: display:grid; place-items:center;（縦横両方） 古典: absolute + translate: position:absolute; top:50%; transform:translateY(-50%); テキスト 1 行限定なら line-height: 親の高さ で簡単 <center> タグや 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 を切れば文句なし。

<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>

非推奨: <center> タグ

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