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

ブロック要素を左右中央に配置する（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: 100vh; /* 高さを指定すると上下中央揃え可能 */
}

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: 100vh;
}

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

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

絶対位置と transform で中央に配置する方法です。ピンポイントで中央揃えしたいときに便利です。

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で中央寄せする方法

この記事では、インライン要素・ブロック要素・画像やボタンなど、さまざまな要素を中央揃えにする方法を解説しました。

• 左右中央寄せだけをしたい場合も、FlexboxやGridで柔軟に対応可能
• 上下左右中央寄せが必要な場合は、Flexbox、Grid、position+transformを使うと簡単

これらの手法を組み合わせることで、読者にとって見やすく操作しやすいブログやサイトを作れます。