【コピペOK！】CSSで中央寄せ完全ガイド | 水平・垂直中央寄せの全手法を徹底解説

はじめに

CSSで要素を中央寄せする方法は数多くありますが、どの方法を使えばよいか迷ったことはありませんか？この記事では、水平中央寄せ、垂直中央寄せ、そして完全中央寄せの全手法を、すぐにコピペできるコード例とともに徹底解説します。

水平中央寄せの方法

① text-align: center（インライン要素・テキスト）

適用場面： テキストやインライン要素を中央寄せしたい場合

<div class="parent">
  <span>中央寄せされるテキスト</span>
</div>

.parent {
  text-align: center;
}

② margin: 0 auto（ブロック要素）

適用場面： 幅が決まっているブロック要素を中央寄せしたい場合

<div class="center-block">
  中央寄せされるブロック要素
</div>

.center-block {
  width: 300px; /* 幅を指定する必要がある */
  margin: 0 auto;
}

③ display: flex（モダンな方法）

適用場面： 柔軟なレイアウトが必要な場合

<div class="flex-parent">
  <div>中央寄せされる要素</div>
</div>

.flex-parent {
  display: flex;
  justify-content: center;
}

垂直中央寄せの方法

① line-height（単行テキスト）

適用場面： 単行テキストを垂直中央寄せしたい場合

<div class="vertical-text">
  垂直中央寄せテキスト
</div>

.vertical-text {
  height: 100px;
  line-height: 100px; /* heightと同じ値 */
}

② display: table-cell

適用場面： 複数行テキストを垂直中央寄せしたい場合

<div class="table-cell">
  <p>複数行の<br>垂直中央寄せ<br>テキスト</p>
</div>

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

③ display: flex

適用場面： モダンで柔軟な垂直中央寄せが必要な場合

<div class="flex-vertical">
  <div>垂直中央寄せされる要素</div>
</div>

.flex-vertical {
  display: flex;
  align-items: center;
  height: 200px;
}

完全中央寄せ（水平・垂直同時）の方法

① display: flex（最も推奨）

適用場面： モダンブラウザ対応で最も汎用性が高い

<div class="flex-center">
  <div>完全中央寄せされる要素</div>
</div>

.flex-center {
  display: flex;
  justify-content: center; /* 水平中央 */
  align-items: center;     /* 垂直中央 */
  height: 100vh; /* ビューポート全体の高さ */
}

② display: grid

適用場面： Gridレイアウトを使用している場合

<div class="grid-center">
  <div>Grid中央寄せ</div>
</div>

.grid-center {
  display: grid;
  place-items: center;
  height: 100vh;
}

/* または */
.grid-center {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

③ position: absolute + transform

適用場面： 要素のサイズが不明な場合

<div class="absolute-center">
  <div class="absolute-center-item">
    サイズ不明でも中央寄せ
  </div>
</div>

.absolute-center {
  position: relative;
  height: 100vh;
}

.absolute-center-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

④ position: absolute + margin

適用場面： 要素のサイズが既知の場合

<div class="absolute-margin">
  <div class="absolute-margin-item">
    サイズ既知の中央寄せ
  </div>
</div>

.absolute-margin {
  position: relative;
  height: 100vh;
}

.absolute-margin-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 100px;
  margin-top: -50px;  /* heightの半分 */
  margin-left: -100px; /* widthの半分 */
}

⑤ position: absolute + inset

適用場面： モダンブラウザでのシンプルな記述

<div class="inset-center">
  <div class="inset-center-item">
    insetを使った中央寄せ
  </div>
</div>

.inset-center {
  position: relative;
  height: 100vh;
}

.inset-center-item {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 200px;
  height: 100px;
}

よくある問題と解決法

問題１：margin: 0 autoが効かない

原因： 要素にwidthが設定されていない、またはdisplay: inlineになっている

/* NG例 */
.ng-example {
  margin: 0 auto; /* widthがないため効かない */
}

/* OK例 */
.ok-example {
  width: 300px; /* または max-width */
  margin: 0 auto;
}

問題２：flexboxで子要素が縦に伸びる

原因： align-itemsのデフォルト値がstretchになっている

/* NG例 */
.flex-stretch {
  display: flex;
  justify-content: center;
  /* align-items: stretch; デフォルト値 */
}

/* OK例 */
.flex-no-stretch {
  display: flex;
  justify-content: center;
  align-items: center; /* または flex-start */
}

問題３：position: absoluteで親要素からはみ出る

原因： 親要素にposition: relativeが設定されていない

/* NG例 */
.parent {
  /* position: relativeがない */
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
}

/* OK例 */
.parent {
  position: relative; /* 必須 */
}

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

ブラウザ対応表

まとめ

CSSの中央寄せには多くの方法がありますが、現在のWeb開発ではflexboxを使用することを強く推奨します。flexboxは柔軟性が高く、ブラウザ対応も良好で、レスポンシブデザインにも対応しやすいためです。

迷った時の選択指針：

1. テキスト： text-align: center;
2. ブロック要素（幅固定）： margin: 0 auto;
3. 完全中央寄せ： display: flex; + justify-content: center; + align-items: center;
4. 複雑なレイアウト： display: grid; + place-items: center;

この記事のコード例をそのままコピペして、あなたのプロジェクトに活用してください。中央寄せで困った時は、ブックマークしてご活用いただければ幸いです。