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

中央に揃える

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

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

• 「なぜか中央にならない」
• 「毎回ググってしまう」
• 「margin auto と Flex どっち？」

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

中央寄せの考え方（仕組み）

中央寄せは特別なテクニックではなく、「余白をどう配分するか」を理解すると自然に選べます。

CSSでは、レイアウトモデル（インライン・ブロック・Flex・Gridなど）によって中央の考え方が変わります。

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

ひとつずつ解説します。

インライン・ブロックの中央寄せ（基本編）

インライン（text-align）

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

• どう書くか

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

• なぜそうなるか（仕組み）

• text-align はインライン内容の整列位置を指定するプロパティです。
• これは「要素そのもの」ではなく、「中身（インライン）」を揃えています。

• どんなとき使うか

• テキスト
• アイコン
• インライン画像
• ボタン内の文字

画像・バナーでは注意

text-align は本来、テキストを揃えるためのプロパティです。画像が中央に寄るのは、インライン要素として文字と同じ扱いになっているからです。

レイアウトとして画像を中央に置きたい場合は、display: block + margin-inline: auto の方が意図に合っています。

画像・バナー（block + margin）

• どう書くか

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

• なぜそうなるか（仕組み）

• ブロック要素に margin-inline: auto を指定すると、左右の余白が自動で均等配分されます。
• その結果、中央に配置されます。
• auto は「余った空間を分ける」値です。

インライン画像を display: block にすることで、レイアウト要素として扱えるようになります。

• どんなとき使うか

• 画像単体を中央に置きたい
• バナーを中央に置きたい
• 要素単体を中央にしたい

ブロック要素（margin-inline: auto）

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

• どう書くか

.center-block {
  width: 200px;
  margin-inline: auto;
}

• なぜそうなるか（仕組み）

• ブロック要素は通常、利用可能な横幅をすべて占有します（通常フロー）。そのため、幅を指定しない限り“余白”が生まれません。
• 指定した余白を auto が左右均等に分配するため、中央になります。

• どんなとき使うか

• コンテナ
• カード
• 固定幅レイアウト

Flexboxで中央寄せ

Flexboxは「空間を再配分するレイアウトモデル」です。中央寄せは、余白をどの方向に分けるかを指定することで実現できます。

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

横方向のみ

• どう書くか

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

• なぜそうなるか（仕組み）

• justify-content は主軸方向の余白配分を決めます。
• 通常（flex-direction: row）では主軸は横方向です。
• center を指定すると、左右の余白が均等になり、子要素が中央に集まります。

※flex-direction が column の場合、主軸は縦方向になります。

• どんなとき使うか

• 子要素が複数ある
• 横並びの中央揃えをしたい
• ナビゲーションやボタン群を中央にしたい

上下左右中央

• どう書くか

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

• なぜそうなるか（仕組み）

Flexでは、2方向の余白を別々に制御できます。

• justify-content → 主軸方向
• align-items → 交差軸方向

この2つをcenter にすると、横方向と縦方向の余白が均等になり中央に配置されます。

• どんなとき使うか

• モーダルの中央配置
• ローディング表示
• セクション内の中央レイアウト

Gridで中央寄せ

Gridで中央寄せする方法は2種類あります。

• グリッド全体を動かす
• セルの中の要素を動かす

※今回紹介するのは「グリッド全体を動かす方法」です。

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

横方向のみ

• どう書くか

.grid-center-horizontal {
  display: grid;
  justify-content: center;
}

• なぜそうなるか（仕組み）

• justify-contentはグリッド全体の横方向の余白配分を決めます。
• centerを指定すると、左右の空間が均等になりグリッド全体が中央に配置されます。
• グリッドの幅がコンテナより小さい場合に効果があります。

• どんなとき使うか

• 横方向だけ中央にしたい
• 複数要素をまとめて中央に配置したい
• セクション内でレイアウト全体を中央に寄せたい

上下左右中央

• どう書くか

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

• なぜそうなるか（仕組み）

• place-content はalign-content + justify-content のショートハンドです。
• つまり、縦横両方向の余白を均等に配分します。
• その結果、グリッド全体が中央に配置されます。

• どんなとき使うか

• セクション全体を中央に配置したい
• レイアウト単位で中央揃えしたい
• Flexよりも構造的に整理したい場合

place-content と place-items の違い

ショートハンド	効く場面	展開されるプロパティ
place-content	複数行のグリッド全体を中央に動かす	align-content + justify-content
place-items	単一要素（各セル内）を中央に配置する	align-items + justify-items

positionで中央寄せ

position を使った中央寄せは、通常のレイアウトフローから外して座標で配置する方法です。

Flex や Grid と違い、要素を並べるのではなく置く感覚になります。レイアウト目的では Flex / Grid を優先し、position は装飾的・補助的な中央配置に使うのが基本です。

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

横中央のみ

• どう書くか

left: 50%;
transform: translateX(-50%);

※ 対象要素は position: absolute;、親要素には position: relative; を指定します。

• なぜそうなるか（仕組み）

• left: 50%
  → 親要素の横幅の50%位置（中央）に配置されます
• translateX(-50%)
  → 自身の幅の半分だけ左に戻します

この2つを組み合わせることで、「親基準の50%」と「自分基準の50%」を打ち消し合い、中央に揃います。

• どんなとき使うか

• アイコンや装飾要素の中央配置
• 画像の上に重ねるラベル
• ピンポイントで位置を調整したい場合

上下左右中央

• どう書くか

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

• なぜそうなるか（仕組み）

考え方は横中央と同じです。

• top: 50% → 親の縦中央へ移動
• left: 50% → 親の横中央へ移動
• translate(-50%, -50%) → 自身の幅・高さの半分だけ戻す

縦横それぞれで「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の中央寄せには複数の手法がありますが、

重要なのは

「どのレイアウトモデルで、余白をどう配分するか」

これが理解できれば、中央寄せで迷わなくなります。