Webサイトのデザインにおいて、画像をきれいに中央に配置することは基本中の基本です。
しかし、「text-align: center を指定したのに動かない」「上下左右のど真ん中に配置したいのにズレる」といったトラブルに悩まされることは意外と多いのではないでしょうか。
また、近年ではFlexboxやGridといった便利な機能を使えば、もっと簡単にレイアウトを組むことが可能です。
この記事では、CSSを使って画像を中央に配置するための基本的な方法から、モダンな上下中央寄せのテクニック、背景画像の場合の指定方法まで、現在のWeb制作現場で使われている手法を網羅的に解説します。
 執筆者：マヒロ |
|
- OS：Windows 11 / macOS Sequoia
- IDE：Visual Studio / VS Code / IntelliJ IDEA
- その他：Chrome DevTools / 各言語最新安定版
※本メディアでは、上記環境にてコードの動作と情報の正確性を検証済みです。
基本中の基本！左右に中央寄せする2つのパターン
画像を左右の真ん中に配置したい場合、アプローチは主に2つあります。
どちらを使うべきかは、画像を「文字のように扱う」か「箱（ブロック）として扱う」かで決まります。
親要素に text-align: center を指定する
最もポピュラーで簡単な方法です。
画像（<img>）はデフォルトではインライン要素（文字と同じ扱い）であるため、親要素に「文字を中央揃えにしなさい」という命令を出すことで中央に配置されます。
<div class="parent">
<img src="image.jpg" alt="画像">
</div>
<style>
.parent {
text-align: center; /* 親要素に指定する */
}
</style>
text-align は中身のインライン要素を整列させるプロパティなので、画像がブロック要素（display: block）になっている場合はこの方法は効きません。画像自体に margin: 0 auto を指定する
画像をブロック要素として扱い、左右の余白（margin）を自動調整（auto）させることで中央に配置する方法です。
画像のサイズに関わらず、親要素の幅の中で真ん中に配置されます。
<img src="image.jpg" alt="画像" class="center-img">
<style>
.center-img {
display: block; /* ブロック要素にする */
margin: 0 auto; /* 上下0、左右自動 */
}
</style>
<img> タグは元々インライン要素なので、margin: auto を効かせるためには、まず display: block; を指定してブロック要素に変更する必要があります。auto に設定すると、ブラウザが左右の余白を均等に計算して中央に配置してくれます。【推奨】Flexboxで上下左右のど真ん中に配置する
「左右だけでなく、上下方向も含めてエリアのど真ん中に画像を置きたい」という場合は、Flexbox（フレックスボックス） を使うのが最も現代的で確実な方法です。
<div class="flex-container">
<img src="image.jpg" alt="画像">
</div>
<style>
.flex-container {
display: flex; /* Flexboxを有効化 */
justify-content: center; /* 左右の中央寄せ */
align-items: center; /* 上下の中央寄せ */
height: 300px; /* 高さを指定（親要素の高さが必要） */
}
</style>
display: flex; を指定し、justify-content: center; で水平方向の中央揃え、align-items: center; で垂直方向の中央揃えを行います。もっと簡単？Grid Layoutで中央配置
Flexboxと同様にモダンなレイアウト手法である CSS Grid を使うと、さらに短いコードで上下左右中央寄せが実現できます。
<div class="grid-container">
<img src="image.jpg" alt="画像">
</div>
<style>
.grid-container {
display: grid; /* Gridを有効化 */
place-items: center; /* 上下左右を一括で中央寄せ */
height: 300px;
}
</style>
place-items: center; という便利なプロパティがあります。これ1行だけで、子要素をセルの上下左右中央に配置することができます。
position: absolute を使った絶対配置
ヒーローヘッダー（トップページのメイン画像）の上にロゴを重ねて中央に置きたい場合など、要素を重ね合わせる際には position: absolute が役立ちます。
<div class="relative-parent">
<img src="logo.png" alt="ロゴ" class="absolute-img">
</div>
<style>
.relative-parent {
position: relative; /* 基準となる親要素 */
height: 300px;
}
.absolute-img {
position: absolute; /* 絶対配置 */
top: 50%; /* 上から50%の位置へ */
left: 50%; /* 左から50%の位置へ */
transform: translate(-50%, -50%); /* 自身の大きさの半分だけ戻す */
}
</style>
top: 50%; left: 50%; で移動させますが、これだと「画像の左上」が中心に来てしまい、全体としては右下にズレて見えます。transform: translate(-50%, -50%); を使い、画像の幅と高さの半分（50%）だけ左上に移動させることで、画像の中心を親要素の中心にぴったり合わせています。背景画像（background-image）を中央にする場合
<img> タグではなく、CSSの背景画像として表示する場合の中央寄せ設定も確認しておきましょう。
.bg-box {
width: 100%;
height: 400px;
background-image: url('bg.jpg');
background-repeat: no-repeat; /* 繰り返しなし */
background-position: center; /* 背景を中央に配置 */
background-size: cover; /* エリアいっぱいに覆う */
}
background-position プロパティです。center を指定するだけで、画像の中心が要素の中心に来るように配置されます。background-size: cover;（要素の隙間なく埋める設定）とセットで使用されます。画像が中央に寄らない時のチェックポイント
「コード通りに書いたはずなのに、なぜか中央に配置できない！」という場合、以下のポイントを確認してみてください。
- display: block; を忘れていないか
margin: 0 auto;を使う場合、画像自体にdisplay: block;が指定されているか確認しましょう。 - 親要素の幅や高さは十分か
親要素の幅が画像と同じ（パンパン）だったり、高さがなかったりすると、中央に寄せるスペース自体が存在しないため動きません。 - float や position が効いていないか
float: left;やposition: absolute;が指定されていると、通常の配置ルールから外れるため、text-alignやmarginが効かなくなります。
HTML/CSSのスキルを活かして年収を上げる方法
以上、CSSで画像を中央に配置する5つの方法について解説してきました。
| 年収アップにこだわりたい方 （平均アップ額138万円の実績） | テックゴー |
| 未経験・経験者問わず幅広く探したい方 | ユニゾンキャリア |
| 業界に精通した担当者に相談したい方 | キッカケエージェント |
| ゲーム業界への転職を志望する方 | ファミキャリ |
| エンジニア未経験からキャリアを築く方 | イーチキャリア |
