CSSで中央寄せする方法まとめ｜文字・画像・ブロック別に解説

ホームページを作っていると、

こんな悩みを持つこともありますよね。

そこでこの記事では、
文字・画像・ブロック要素ごとに、正しい中央寄せの方法を分かりやすく解説します。

中央寄せは「対象ごとに方法が違う」だけなので、ぜひ確認してみてくださいね！

CSSで中央寄せがうまくいかないよくある原因

まず、CSSで中央寄せがうまくいかないよくある原因から見ていきましょう！

何を中央にしたいのか決まっていない

文字なのか、画像なのか、箱なのかで方法が変わります。

方法を混同している

text-align と margin を混ぜると、うまくいかないことがあります。

古い方法と新しい方法が混ざっている

今は、基本の書き方を覚えればOKです。

文字を中央に寄せる方法（基本）

それでは、基本的な文字を中央に寄せる方法をご紹介します。

まず、文字の中央寄せは、とても簡単です。

p {
  text-align: center;
}

これで、文章が中央にそろいます。

なぜこれで中央になる？

text-align は、
文字やインライン要素の位置 をそろえる指定です。

画像を中央に寄せる方法

一方、画像は、文字とは少し考え方が違います。

ここでは、画像を中央に寄せる方法をご紹介します。

text-alignを使う方法

.image-area {
  text-align: center;
}

<div class="image-area">
  <img src="sample.jpg">
</div>

親に指定すると、画像が中央にきます。

marginを使う方法（おすすめ）

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

なぜ block が必要？

imgは初期状態ではインライン要素です。
display: block; にすると、marginが効くようになります。

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

あと、ブロック要素を中央に寄せる方法もご紹介します。

箱（divなど）を中央にしたいときはこちらです。

.box {
  width: 300px;
  margin: 0 auto;
}

重要なポイント

• 横幅の指定が必要
• 幅がないと、中央になりません

縦と横を両方中央に寄せる方法（flexbox）

ここでは、縦と横を両方中央に寄せる方法をご紹介します。

これは、画面の真ん中に配置したいときに便利です。

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

これで、横も縦も中央にそろいます。

スマホでも崩れない中央寄せの考え方

スマホでも崩れない中央寄せの考え方をお伝えします。

スマホ対応では、次の点に注意します。

• 幅を固定しすぎない
• %指定を使う
• 画面に合わせて広がる設計にする

中央寄せ自体は、スマホでも同じ方法でOKです。

よくある失敗と直し方

よくある失敗と直し方をご紹介します。

text-alignで箱を中央にしようとしている

👉 箱は margin: 0 auto; を使います。

marginだけ書いている

margin: 0 auto;

👉 横幅が指定されているか確認しましょう。

幅が指定されていない

👉 widthを指定すると解決します。

初心者向けの中央寄せ早見表（コピペ用）

初心者向けの中央寄せ早見表をご紹介します！

コピペで使えますよ。

文字

p {
  text-align: center;
}

画像

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

ボックス

.box {
  width: 300px;
  margin: 0 auto;
}

縦横中央

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

まとめ

「CSSで中央寄せする方法まとめ｜文字・画像・ブロック別に解説」はいかがでしたでしょうか？

CSSの中央寄せは、
対象ごとに方法を分けること が一番大切です。

この考え方が分かれば、
中央寄せで迷うことはほぼなくなりますよ。

私も、今でもよく迷うのですが、、、
基本的には、この記事でお伝えした内容をコピペして使えばうまく行きますよ！