こんにちは！かたすけです。
Web制作をしていると必ず直面するのが、「要素を真ん中にしたい！」という場面です。
特にCSS初心者が最初にぶつかる壁のひとつが「横方向の中央揃え」でしょう。
- テキストを真ん中に置きたい
- 画像をページの中央に配置したい
- ボックスを画面の中央にしたい
調べてみるといろいろな方法が出てきますが、「結局どれを使えばいいの？」と混乱してしまう人も多いはずです。
この記事では、CSSで横中央揃えをするために最低限覚えておくべき2つの方法だけを解説します。
これさえ押さえれば、テキスト・画像・ボックス、すべての要素を迷わず中央に配置できるようになります。
それでは行きましょう！
この記事は、CSSの基本の書き方を理解している方向けです。CSSってどうやって書くの？という方はこちらへ！
まず知っておきたい「要素の種類」
中央揃えを理解するコツは、要素の種類を区別することです。
インライン要素
- テキストやリンク、画像など
- 文字と同じ行に並ぶ小さな要素
- 例：
<span>、<a>、<img>
ブロック要素
- ページ上で独立したボックスとして扱われる要素
- 例：
<div>、<p>、<section>
要素の種類についてもっとわかりやすく知りたい方はこちら！
パターン1：文字や画像を「文字と一緒に」中央揃えしたいとき
テキストや画像を「文章の一部」として中央に置きたいときは、親要素に text-align: center; を書くだけです。
例：文字と画像を一緒に中央揃えする
<p style="text-align: center;">
<img src="sample.jpg" alt="サンプル画像">
これは説明テキストです
</p>📌 ポイント
- 画像
<img>は実はインライン要素（文字と同じ扱い） - 親に
text-align: center;を指定すると、文字も画像もまとめて中央に揃う
初心者がよくやりがちな失敗は、「画像を中央にしたいから margin: auto; を書いたのに効かない」というもの。
これは、画像がデフォルトではインライン扱いだからです。インライン要素には margin: auto; が効きません。
そのため、文字と一緒に中央にしたい場合は必ず 親要素の text-align: center; を使いましょう。
パターン2：ボックスや画像を「単独で」中央にしたいとき
次に、ブロック要素や画像を「単独で」中央に置きたい場合です。
このときの正解は、左右のマージンを自動にすることです。
例：ボックスを中央に配置
<div style="width: 200px; margin: 0 auto; background: #eee;">
真ん中のボックス
</div>
例：画像を単独で中央に配置
<img src="sample.jpg" alt="サンプル画像" style="display: block; margin: 0 auto;">📌 ポイント
- 幅を指定したブロック要素 →
margin: 0 auto; - 画像 →
display: block; margin: 0 auto;
初心者がつまずくポイントは「ブロック要素に幅を指定していない」こと。
幅を指定していないと要素が親いっぱいに広がってしまい、中央に配置されたように見えません。
必ず幅を決めてから margin: auto; を使う、これを覚えておけば安心です。
よくある質問と失敗例
Q1. なぜ画像は margin: auto; だけでは中央にならないの？
画像 <img> はデフォルトでインライン要素だからです。
インライン要素は文字と同じ扱いなので、margin: auto; が効きません。
そのため「単独で中央にしたい」場合は、display: block; をつけてから margin: auto; を指定します。
Q2. ブロック要素なのに中央に寄らないのはなぜ？
幅を指定していないと、要素は親の横幅いっぱいに広がります。
その状態では左右の余白がなく、中央に寄せようがありません。
解決方法はシンプルで、幅を指定することです。
まとめ（この2つだけ覚えれば大丈夫！）
CSSで横方向の中央揃えをする方法はたくさんありますが、初心者が最初に覚えるべきなのはこの2つだけです。
| 置きたいもの | 方法 |
|---|---|
| 文字や画像をテキストと一緒に中央にしたい | 親に text-align: center; |
| ボックスや画像を単独で中央にしたい | margin: 0 auto;（画像は display:block を追加） |
- CSSで横中央揃えする方法はたくさんあるけど、初心者は2つだけ覚えればOK
- インライン要素（文字・画像） → 親に
text-align: center; - ブロック要素（div・画像をブロック化したもの） →
margin: 0 auto; - 画像は「文字と一緒」か「単独」かで使い分ける！
👉 このルールさえ覚えておけば、テキスト・画像・ボックスを迷わず中央に配置できるようになります。
皆さんの場合はどちらのパターンでしたか？ぜひ参考にしてくださいね！
最後まで読んでいただき、ありがとうございました！
