CSSで中央寄せする方法まとめ｜テキスト・画像・バナー・ボックスを迷わず真ん中に配置

中央に揃える

というレイアウトは、Webデザインで最もよく使う基本テクニックのひとつ。

ただし、要素の種類（テキスト・画像・ブロック要素）や揃え方（横だけ・縦横両方）によって最適な書き方が変わります。

この記事では、シンプルな text-align から、柔軟に使える Flexbox・Grid・position まで、実用的な方法を比較しながら紹介します。

要素を中央寄せする方法

1. インライン要素の中央寄せ（text-align:center）
2. ブロック要素の中央寄せ（margin-inline:auto）
3. Flexboxを使用する方法
4. Gridを使用する方法
5. positionを使用する方法

インライン要素を中央に配置する（text-align: center）

テキストやアイコンを親要素の中央に揃えたいときは、親要素にtext-align: center; を使うのが基本です。

インライン要素には<span>、<a>、<img> などがあります。

テキストやアイコンなどの小さな要素が横に並び、ブロック要素の中に収まるイメージ。

See the Pen 中央寄せ｜インライン要素（text-align: center） by Turicco (@Turicco) on CodePen.

<div class="center-inline">
  <span>テキスト</span>
  <img src="" alt="アイコン">
  <a href="#">リンク</a>
</div>

.center-inline {
  text-align: center;
}

画像・バナーを中央に配置する（推奨：ブロック化して中央寄せ）

画像やバナーを中央に配置したい場合、画像自体をブロック要素として扱い左右中央に配置する方法が推奨されます。

ベーシックな書き方（画像単体を中央寄せ）

<img src="banner.jpg" alt="バナー画像" class="img-center">

.img-center {
  display: block;
  margin-inline: auto;
}

この方法では、指定した画像だけを左右中央に配置できます。

ブロック要素を左右中央に配置する（margin-inline: auto）

div や section などのブロック要素を左右中央に配置する方法です。

See the Pen 中央寄せ｜ by Turicco (@Turicco) on CodePen.

<div class="center-block">
  バナーエリア
</div>

.center-block {
  width: 300px; /* 幅を指定するのがポイント */
  margin-inline: auto; /* 左右中央寄せ */
}

Flexboxで左右＋上下中央に配置する方法

Flexboxは横中央だけでなく縦中央も簡単に実現できます。用途に応じて使い分けましょう。

See the Pen 中央寄せ｜Flexbox by Turicco (@Turicco) on CodePen.

左右中央寄せだけしたい場合

横方向だけ中央に揃えたい場合は justify-content: center; のみを指定します。縦方向は特に揃えません。

<div class="flex-center-horizontal">
  <div>中央の要素</div>
</div>

.flex-center-horizontal {
  display: flex;
  justify-content: center; /* 横方向のみ中央 */
}

上下左右中央揃えをしたい場合

縦方向も中央に揃えたい場合は align-items: center; を追加します。高さを指定すると縦方向も中央に配置されます。

<div class="flex-center">
  <div>中央の要素</div>
</div>

.flex-center {
  display: flex;
  justify-content: center; /* 横中央 */
  align-items: center; /* 縦中央 */
  height: 200px; /* 高さを指定すると上下中央揃え可能 */
}

Gridで左右＋上下中央に配置する方法

Grid も Flexbox 同様に中央揃えが可能ですが、用途によって使い方を変えると便利です。

See the Pen 中央寄せ｜ by Turicco (@Turicco) on CodePen.

左右中央寄せだけしたい場合

justify-content を使います。縦方向の中央揃えは不要な場合はこちらを使いましょう。

<div class="grid-center-horizontal">
  <div>中央の要素</div>
</div>

.grid-center-horizontal {
  display: grid;
  justify-content: center; /* 横方向のみ中央 */
}

上下左右中央揃えをしたい場合

上下左右中央に揃えたい場合は place-content: center を使用します。

<div class="grid-center">
   <div>中央の要素</div>
</div>

.grid-center {
  display: grid;
  place-content: center; /* 上下左右中央寄せ */
  height: 200px;
}

詳細プロパティ	対応レイアウト	役割
place-content	Grid	align-content + justify-content のショートハンド。コンテナの 余白部分を含めた子要素全体の配置 を中央にする
justify-content	Flex / Grid	横方向の中央寄せなど
align-items	Flex / Grid	縦方向の中央寄せなど
align-content	Flex / Grid	複数行の Flex / Grid のブロック全体の縦方向配置 に使う

positionでピンポイントに中央配置する方法

絶対位置と transform で中央に配置する方法です。レイアウト目的では Flex / Grid を優先し、position は装飾的な配置に使いましょう。

See the Pen 中央寄せ｜psition版 by Turicco (@Turicco) on CodePen.

左右中央寄せだけしたい場合

左右中央だけにしたい場合は、left: 50% と transform: translateX(-50%) を使います。

<div class="position-center-x">
  <div>中央の要素</div>
</div>

.position-center-x {
  position: relative; /* 親要素に relative を指定 */
}

.position-center-x > div {
  position: absolute;
  left: 50%; /* 左右中央 */
  transform: translateX(-50%);
}

上下左右中央揃えをしたい場合

上下左右両方に中央寄せしたい場合は、top: 50% と transform: translate(-50%, -50%) を追加します。

<div class="position-center">
   <div>中央の要素</div>
</div>

.position-center {
  position: relative; /* 親要素に relative を指定 */
  height: 100vh; /* 高さを指定 */
}

.position-center > div {
  position: absolute;
  top: 50%; /* 縦中央 */
  left: 50%; /* 横中央 */
  transform: translate(-50%, -50%);
}

上下左右中央寄せの方法を比較して最適な手法を選ぶ

方法	対応要素	左右中央	上下左右中央	ポイント
text-align: center	インライン	○	×	テキストやアイコン向き
margin-inline: auto	ブロック	○	×	幅指定が必要
Flexbox	任意	○	○	子要素複数でも対応
Grid	任意	○	○	place-content で簡単
position + transform	任意	○	○	高さ指定が必要、やや複雑

用途別｜中央寄せの選び方

• テキストや小さなアイコンだけ中央にしたい
  → text-align: center
• ブロック要素を左右中央だけにしたい
  → margin-inline: auto
• 複数要素をまとめて柔軟に中央揃えしたい
  → Flexbox または Grid
• 特定の位置にピンポイントで中央配置したい
  → position + transform

まとめ｜CSSで中央寄せする方法

CSSの中央寄せには複数の手法がありますが、重要なのは「何を・どこに・どんな目的で配置したいか」を意識することです。

目的に応じて適切な方法を選び、必要に応じて組み合わせることで、見やすく、操作しやすいブログやWebサイトを効率よく作れます。