目次
- はじめに：なぜ画像は勝手に左に寄るのか？
- 結論：迷ったら「display:block + margin:0 auto」
- なぜ中央寄せできないのか？（本質）
- imgはデフォルトでインライン要素
- 方法①：text-alignで中央寄せ
- 仕組み
- 向いているケース
- 向いていないケース
- 方法②：display:block + margin:auto（実務推奨）
- なぜ効く？
- 特徴
- width指定がないとどうなる？
- 方法③：flexboxで中央寄せ
- 向いているケース
- 注意
- 方法④：gridで中央寄せ
- メリット
- 上下左右を完全中央にする方法
- 中央寄せできない原因チェックリスト
- DevToolsで確認する手順
- レスポンシブでの最重要設定
- 横スクロールが出る典型例
- よくある初心者ミス
- 使い分け早見表
- 画像とレイアウト設計の関係
- まとめ：中央寄せは「仕組み」を理解するだけ
はじめに：なぜ画像は勝手に左に寄るのか？
HTMLで画像を置くと、ほぼ確実に「左寄せ」になります。
最初のころ、私は何度もこう思いました。
「なんで中央にならないんだ…？」
でも原因は単純です。
imgタグの性質を理解していないだけ。
この記事では、
- なぜ中央寄せできないのか
- 一番安全な方法はどれか
- flexやgridはいつ使うべきか
- スマホ崩れ・横スクロール問題の回避法
まで、実務レベルで整理します。
結論：迷ったら「display:block + margin:0 auto」
画像を中央寄せしたいなら、まずこれを覚えましょう。
img {
display: block;
margin: 0 auto;
}これが最も汎用性が高く、事故が少ない方法です。
なぜ中央寄せできないのか？（本質）
imgはデフォルトでインライン要素
インライン要素の特徴：
- margin:auto が効かない
- width指定が効きにくい
- text-alignの影響を受ける
だから中央にならない。
方法①：text-alignで中央寄せ
<div class="img-wrap">
<img src="sample.jpg" alt="サンプル画像">
</div>.img-wrap {
text-align: center;
}仕組み
インライン要素は text-align の影響を受けます。
向いているケース
- 文章中の画像
- 単純な中央配置
向いていないケース
- width制御を細かくしたい場合
- レイアウト制御を伴う場合
方法②：display:block + margin:auto（実務推奨）
img {
display: block;
margin: 0 auto;
}なぜ効く？
block要素は左右マージンを自動計算できるから。
特徴
- 安定
- width指定と相性良い
- 横スクロール事故が少ない
width指定がないとどうなる？
blockでも widthが100%なら中央の概念がなくなります。
img {
width: 300px;
}または
img {
max-width: 100%;
}状況に応じて使い分けます。
方法③：flexboxで中央寄せ
.img-wrap {
display: flex;
justify-content: center;
}向いているケース
- 横並びレイアウト
- 複数要素を中央寄せ
- ボタン＋画像のセット配置
注意
親要素に display:flex が必要。
方法④：gridで中央寄せ
.img-wrap {
display: grid;
place-items: center;
}メリット
- 横も縦も中央可能
- コードがシンプル
上下左右を完全中央にする方法
.img-wrap {
display: flex;
justify-content: center;
align-items: center;
}または
.img-wrap {
display: grid;
place-items: center;
}中央寄せできない原因チェックリスト
✔ imgがinlineのまま
✔ widthが100%になっている
✔ 親要素にtext-alignがない
✔ CSSが読み込まれていない
✔ position:absoluteで制御している
ほとんどはここ。
DevToolsで確認する手順
- Elementsでimgを選択
- Computedタブでdisplay確認
- margin値を確認
- 親要素のレイアウト確認
レイアウト崩れは必ずDOMに出ます。
レスポンシブでの最重要設定
img {
max-width: 100%;
height: auto;
}これを入れないと、
- スマホで横スクロール発生
- 画像が画面からはみ出す
横スクロールが出る典型例
- 固定幅画像（width:1200px）
- 親にoverflow制御なし
- box-sizing未指定
安全策：
* {
box-sizing: border-box;
}よくある初心者ミス
- brで中央に見せる
- で位置調整
- positionで無理やり中央
これらはレスポンシブで崩れます。
使い分け早見表
| 状況 | 推奨方法 |
|---|---|
| 単純中央 | block + margin |
| 文章内 | text-align |
| 横並び制御 | flex |
| 上下左右中央 | grid |
画像とレイアウト設計の関係
画像は単体で考えない。
- 親要素のdisplay
- width指定
- レスポンシブ設計
ここがセット。
まとめ：中央寄せは「仕組み」を理解するだけ
画像中央寄せは難しくありません。
本質はこれだけ。
- imgはインライン
- margin:autoはblockに効く
- 親要素が重要
迷ったら：
img {
display: block;
margin: 0 auto;
}まずはここから。
仕組みを理解すれば、
レイアウトの悩みは一気に減ります。