過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li><strong>現代の定番: Flexbox</strong>: <code>display:flex; align-items:center;</code></li><li><strong>もっと簡潔: Grid</strong>: <code>display:grid; place-items:center;</code>（縦横両方）</li><li><strong>古典: absolute + translate</strong>: <code>position:absolute; top:50%; transform:translateY(-50%);</code></li><li><strong>テキスト 1 行限定</strong>なら <code>line-height: 親の高さ</code> で簡単</li><li><code><center></code> タグや <code>vertical-align:middle</code> は <strong>限定的にしか効かない</strong>（インライン要素 / table-cell のみ）</li></ul></td></tr></table>
<h2>結論: 場面別の推奨</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>状況</th><th>推奨手法</th></tr></thead>
<tbody>
<tr><td>ブロック要素を縦中央寄せ</td><td><strong>Flexbox</strong> <code>align-items:center</code></td></tr>
<tr><td>縦も横も中央寄せ</td><td><strong>Grid</strong> <code>place-items:center</code></td></tr>
<tr><td>テキスト 1 行を縦中央</td><td><code>line-height: 高さ</code></td></tr>
<tr><td>絶対配置（モーダル中央）</td><td><code>position:fixed</code> + Flex / translate</td></tr>
<tr><td>img の縦中央（インライン）</td><td><code>vertical-align:middle</code></td></tr>
<tr><td>テーブルセル内</td><td><code>vertical-align:middle</code>（デフォルト）</td></tr>
</tbody>
</table>

<h2>方法 1: Flexbox（最も推奨）</h2>

<p>2026 年現在、最も汎用的で推奨される方法です。IE11 を切れば文句なし。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><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></code></pre>
<p>子要素が複数あっても全部縦中央に揃います。<code>flex-direction</code> を変えると主軸 / 交差軸が入れ替わる点だけ注意。</p>

<h2>方法 2: Grid（最も短い）</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><div class="parent">
  <div class="child">中央寄せ</div>
</div>

<style>
.parent {
  display: grid;
  place-items: center;   /* 縦も横も中央 (= align-items + justify-items) */
  height: 300px;
}
</style></code></pre>
<p><code>place-items: center</code> は <code>align-items: center</code> と <code>justify-items: center</code> のショートハンド。1 行で完結します。</p>

<h2>方法 3: absolute + translate（古典）</h2>

<p>親に <code>position:relative</code>、子を <code>absolute</code> にして 50% ずらし、自身のサイズ分だけ戻す方法。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><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></code></pre>
<h2>方法 4: テーブルセル（IE 対応で使われた）</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><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></code></pre>
<p>古いブラウザ対応で使われた手法。Flexbox 普及後は不要です。</p>

<h2>方法 5: line-height トリック（1 行テキスト限定）</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><div class="parent">中央寄せ 1 行テキスト</div>

<style>
.parent {
  height: 80px;
  line-height: 80px;   /* 親の height と同じ値 */
  text-align: center;
}
</style></code></pre>
<p><strong>2 行になると崩れる</strong>のが弱点。バッジやボタンラベルなど確実に 1 行のもの限定。</p>

<h2>方法 6: margin: auto（Flex 内のみ）</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><div class="parent">
  <div class="child">中央寄せ</div>
</div>

<style>
.parent {
  display: flex;
  height: 300px;
}
.child {
  margin: auto;    /* Flex コンテナの中で縦横中央 */
}
</style></code></pre>
<h2>方法 7: モーダル/ダイアログを画面中央に</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><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></code></pre>
<h2>img / icon を縦中央（インライン）</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><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></code></pre>
<h2>非推奨: <center> タグ</h2>

<p>HTML4 で deprecated、HTML5 で廃止。CSS で書きましょう:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- ❌ 廃止 -->
<center>古い書き方</center>

<!-- ✅ CSS で -->
<div style="text-align:center">横中央</div>
<div style="display:grid;place-items:center;min-height:100vh">縦横中央</div></code></pre>
<h2>よくあるトラブル</h2>

<ul>
<li><strong>親に height が無いと縦中央にならない</strong> → 親に <code>height:300px</code> や <code>min-height:100vh</code> を明示</li>
<li><strong>body 全体を中央にしたい</strong> → <code>html, body { height: 100%; margin: 0; }</code> + Flex/Grid</li>
<li><strong>align-items:center が効かない</strong> → 親が <code>display:flex</code> / <code>grid</code> になっているか確認</li>
<li><strong>絶対配置で中央寄せが崩れる</strong> → translate の数値（-50%）が子のサイズに対する相対だと理解</li>
</ul>

<h2>ブラウザ対応</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>手法</th><th>IE11</th><th>モダンブラウザ</th></tr></thead>
<tbody>
<tr><td>Flexbox</td><td>制限あり（バグ多）</td><td>完全対応</td></tr>
<tr><td>Grid <code>place-items</code></td><td>非対応</td><td>完全対応</td></tr>
<tr><td>absolute + translate</td><td>対応</td><td>対応</td></tr>
<tr><td>table-cell</td><td>対応</td><td>対応</td></tr>
</tbody>
</table>

<h2>FAQ</h2>

<p><strong>Q: 縦も横も中央にしたい一番短い書き方は？</strong><br />
A: <code>display:grid; place-items:center;</code> の 2 行。</p>

<p><strong>Q: なぜ vertical-align: middle がブロック要素で効かない？</strong><br />
A: <code>vertical-align</code> は<strong>インラインレベル要素と table-cell でしか効かない</strong>仕様だからです。ブロック要素には Flex / Grid を使ってください。</p>

<p><strong>Q: IE11 対応が必要</strong><br />
A: Flexbox の縦中央は IE11 でもおおむね動きます（バグ多めですが）。Grid は IE11 では使えないので Flex に統一を。</p>