CSS 中央寄せ完全ガイド｜text-alignとflexbox解説

Webデザインをしていると要素を中央に寄せたいという場面はとても多いですよね。ただし、CSS 中央寄せにはテキスト・画像・ボックス要素など、対象によって方法が異なります。この記事では、CSSで中央寄せする9つの方法（縦・横・ど真ん中）をベースに、text-alignを使ったテキストの中央揃え、flexboxやgridによる上下左右の中央寄せまで、初心者にもわかりやすく解説します。

Table of contents

CSSで中央寄せを行う基本の考え方
テキストを中央寄せする方法
ブロック要素を横方向に中央寄せする方法
画像を中央寄せする方法
縦方向に中央寄せする方法
flexboxで上下左右の中央寄せを実現
gridで要素を簡単に中央寄せする方法
実践例・テキストと画像を中央に配置するレイアウト
まとめ｜CSS中央寄せのベストプラクティス

CSSで中央寄せを行う基本の考え方

中央寄せには、次の3種類があります。

横方向の中央寄せ
縦方向の中央寄せ
上下・縦横・中央寄せ

また、テキストや画像など、対象となる要素の種類によって指定方法が異なります。よくあるミスとして、「text-align: center;をブロック要素に指定しても効かない」というケースがあります。これは、text-alignはテキストやインライン要素にしか効果がないためです。

テキストを中央寄せする方法

テキストを中央寄せするには、text-align: center; を使います。

p {
  text-align: center;
}

ポイントは、テキストを囲む親要素に指定することです。

<div style="text-align: center;">
  <p>このテキストは中央寄せです。</p>
</div>

text-alignは、段落、見出し、ボタン内の文字など、テキストコンテンツの整列に最も使われるプロパティです。

ブロック要素を横方向に中央寄せする方法

ブロック要素を中央に配置したい場合は、margin: 0 auto; を使います。

div {
  width: 300px;
  margin: 0 auto;
}

中央寄せがうまくいかないときは、widthが指定されていない可能性があります。ブロック要素の幅を明示しないと、margin: 0 auto;は機能しません。また、インライン要素を中央寄せしたいときは、display: block;を指定してブロック要素化するのがポイントです。

画像を中央寄せする方法

画像・<img>タグはインライン要素なので、text-align: center;を使って中央寄せできます。

div {
  text-align: center;
}

もし画像をブロック要素として扱いたい場合は、次のように指定します。

img {
  display: block;
  margin: 0 auto;
}

この方法は、画像だけを中央に配置したい場合に便利です。

縦方向に中央寄せする方法

縦方向のCSS 中央寄せにはいくつかの手段があります。

1. line-heightを使う・単一行テキストのみ

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
}

テキストが1行の場合にのみ有効です。

2. position + transformで中央寄せ

ボックス要素を上下左右の中央に配置する代表的な方法です。

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

この指定により、親要素の中央を基準にして要素を中央へ移動できます。

3. vertical-alignでテーブル要素内の縦中央寄せ

td {
  vertical-align: middle;
}

表組みやインラインブロック要素の整列時に使用します。

flexboxで上下左右の中央寄せを実現

flexboxを使えば、縦横どちらの中央寄せも簡単に行えます。具体的なコード例は、【コピペOK！】CSS中央寄せ完全ガイドにも詳しく紹介されています。

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

これで、子要素が上下左右の中央に配置されます。1行で書くなら次のようにも可能です。

display: flex;
justify-content: center;
align-items: center;

flexboxの利点

縦横の中央寄せを1行で実現
複数要素の整列も柔軟に制御
レスポンシブ対応にも強い

gridで要素を簡単に中央寄せする方法

最新のCSS Gridを使えば、さらにシンプルに中央寄せができます。

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

この1行で、横・縦の中央寄せを同時に実現します。複数の子要素を持つ場合や、レイアウト構造を保ちたいときに最適です。

実践例・テキストと画像を中央に配置するレイアウト

以下の例のように、flexboxを使えばテキストと画像の上下中央寄せが簡単に行えます。さらに参考として、CSSで要素を中央寄せする方法まとめもチェックしておくと便利です。

<div class="container">
  <img src="icon.png" alt="アイコン">
  <h2>中央に配置された見出し</h2>
</div>

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
}

このコードで、画像とテキストを上下中央揃えに配置できます。レスポンシブデザインにも対応し、画面サイズが変わっても整列が崩れません。