【CSS_24】 中央寄せの色々な方法（テキスト、ブロックなど）

CSSでの中央寄せを極める ── テキスト・ブロック・縦横センターについて

中央寄せ（センタリング）は、CSSで最もよく使われるスタイルテクニックの1つです。テキストの中央寄せからブロック要素の縦横センターまで、多彩な方法があります。本記事では、あらゆる種類の要素に対して「適切な」中央寄せをするための手法を、完全網羅で解説していきます。

目次

1. テキストの中央寄せ（横方向）

2. インライン要素の中央寄せ

3. ブロック要素の横方向中央寄せ

4. 縦方向の中央寄せ（垂直センタリング）

5. 縦横中央寄せ（完全センター）

6. 最新のFlexbox・Gridによるセンタリング

7. よくあるミスと注意点

8. まとめと選定チャート

1. テキストの中央寄せ（横方向）

方法

text-align: center;

HTML例

<div style="text-align: center;">
  中央寄せされたテキスト
</div>

ポイント

• 適用対象はインライン・インラインブロック要素（span, a, テキストなど）

• div に text-align: center を指定 → 内部のインライン要素が中央揃え

2. インライン要素の中央寄せ（親がblock要素の場合）

方法（text-align）

.parent {
  text-align: center;
}

HTML例

<div class="parent">
  <span>中央寄せされたspan</span>
</div>

3. ブロック要素の横方向中央寄せ

方法1: margin: auto（幅指定必須）

.block {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

使用条件

• 要素が display: block or display: table であること

• width を明示的に指定していること

方法2: text-align: center + display: inline-block

.parent {
  text-align: center;
}
.child {
  display: inline-block;
}

HTML例

<div class="parent">
  <div class="child">中央寄せされたブロック</div>
</div>

ポイント

• ブロック要素を「インラインブロック」に変換して中央寄せ

4. 縦方向の中央寄せ（垂直センタリング）

方法1: 行の高さ (line-height) を活用（テキスト専用）

.box {
  height: 100px;
  line-height: 100px;
}

注意点

• テキスト1行専用、複数行では崩れる

• vertical-align ではない点に注意

方法2: vertical-align + display: table-cell

.parent {
  display: table;
  height: 200px;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

ポイント

• 古典的手法。ブラウザ対応が広い。

• table構造の見た目は避けられない場合がある。

5. 縦横中央寄せ（絶対センタリング）

方法1: position: absolute + transform

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

解説

• 子要素の中心を親要素の中心に一致させる

• transform による-50%補正が重要

6. FlexboxとGridによる現代的なセンタリング

Flexbox（最推奨）

.parent {
  display: flex;
  justify-content: center; /* 横方向 */
  align-items: center;     /* 縦方向 */
}

応用：縦だけ・横だけ

• align-items: center → 縦方向だけ中央

• justify-content: center → 横方向だけ中央

CSS Grid（究極のレイアウト）

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

ポイント

• place-items: center; は縦横一括指定

• Grid対応のブラウザが前提

7. ⚠️ よくあるミスと注意点

margin: auto だけで幅を指定していない
　幅が100%だと意味がない
text-align: center を span に指定
　親に指定しないと効果がない
position: absolute で親に relative を指定し忘れる
　子が画面全体に対して配置される

8. センタリング手法選定チャート

テキスト
　text-align: center
　→ 親に設定
インライン要素
　text-align: center
　→ 親に設定
ブロック要素（横）
　margin: 0 auto
　→ width必須
ブロック要素（縦）
　display: table-cell + vertical-align
　→ 柔軟だがやや古い
完全中央寄せ
　position: absolute + transform
　→ 正確なセンター
モダンな方法
　Flexbox / Grid
　→ 保守性・簡潔さに優れる

終わりに

センタリングと一口に言っても、目的の要素・状況・レスポンシブ性によって適した手法は異なります。現代的にはFlexboxかGridの使用が最適ですが、古いブラウザの対応や特定条件下では絶対配置やtable-cellも選択肢となりえます。