CSSで画像を中央揃えする方法を横縦縦横パターン別に徹底解説

折原 慧ウェブデザインデイ 編集ライター

Webサイトを作っていて「画像を真ん中に置きたいのに、なぜか左に寄ってしまう」という経験は、きっと多くの方がお持ちだと思います。CSSで画像を中央に配置する方法は一つではなく、状況によって最適な書き方が変わってきます。

個人的にコーディングに携わってきた中で気づいたのですが、中央揃えでつまずく方の多くは「横方向」「縦方向」「縦横両方」のどれを求めているのか整理できていないケースが少なくありません。この記事では、コピペしてすぐ使えるコードとあわせて、なぜそうなるのかまで丁寧に解説していきます。

そもそもなぜ画像は中央に来ないのか

まず押さえておきたい前提があります。

img要素は、初期状態では「インライン要素」として扱われます。これはテキストと同じ性質で、行の中に文字のように並ぶという意味です。だからこそ、テキストを中央寄せするのと同じ方法が使えるのですが、逆にブロック要素向けの中央寄せがそのままでは効かない理由にもなっています。

この「インラインかブロックか」という違いを理解しておくと、どの方法を選べばいいかが自然と見えてきます。

横方向の中央寄せの基本テクニック

まずは一番よく使う、左右の中央寄せから見ていきましょう。ここでは代表的な方法を順番に紹介します。

親要素にtext-alignを指定する方法

img要素がインライン要素であることを利用した、最もシンプルな方法です。画像を包む親要素にtext-align: center;を指定するだけで、テキストと同じように中央に寄ります。

<div class="center">
  <img src="sample.jpg" alt="">
</div>

<style>
.center {
  text-align: center;
}
</style>

この方法は画像の幅が親要素より狭い場合に有効で、複数の画像を一列に並べて中央寄せしたいときにも使えます。初心者の方にとって最初に覚えるべき方法だと思います。

displayをblockにしてmarginをautoにする方法

画像そのものをブロック要素に変えてしまう方法です。imgにdisplay: block;を指定した上で、左右のマージンをautoにすると中央に配置されます。

<img src="sample.jpg" class="center-img" alt="">

<style>
.center-img {
  display: block;
  margin: 0 auto;
  /* 必要なら width や max-width を指定 */
}
</style>

W3Cの例をはじめ、多くの解説で「最も基本的な画像中央寄せ」として紹介されている方法です。親要素の幅が決まっていれば、画像はちょうどその中央に表示されます。

画像を包むdivごと中央にする方法

画像単体ではなく、画像を含むまとまり全体を中央に置きたいときに便利です。包むdivに幅を指定し、そのdivにmargin: 0 auto;を与えます。

<div class="img-wrapper">
  <img src="sample.jpg" alt="">
</div>

<style>
.img-wrapper {
  width: 400px;
  margin: 0 auto;
}
</style>

キャプション付きの画像など、コンポーネント全体をまとめて中央配置したい場面で活躍します。

Flexboxで横中央にする方法

近年もっとも手軽でよく使われるのがFlexboxです。親要素にdisplay: flex;とjustify-content: center;を指定するだけで、子要素が左右中央に揃います。

<div class="flex-center">
  <img src="sample.jpg" alt="">
</div>

<style>
.flex-center {
  display: flex;
  justify-content: center;
}
</style>

画像に限らず、複数の要素をまとめて中央寄せできる柔軟さが魅力です。これから覚えるなら、まずFlexboxを押さえておくと応用が効きます。

縦方向および縦横中央寄せのテクニック

横だけでなく、上下の中央、あるいは縦横どちらも中央に置きたい場面もよくあります。ここが多くの方が悩むポイントです。

Flexboxで縦横中央にする方法

縦横中央こそ、Flexboxの真価が発揮される場面です。親要素に高さを持たせ、justify-content: center;とalign-items: center;を組み合わせます。

<div class="flex-center-both">
  <img src="sample.jpg" alt="">
</div>

<style>
.flex-center-both {
  display: flex;
  justify-content: center;  /* 横方向中央 */
  align-items: center;      /* 縦方向中央 */
  height: 300px;            /* 中央揃えしたい領域の高さ */
}
</style>

justify-contentが横、align-itemsが縦と覚えておけば迷いません。たった2行の指定で縦横の中央が完成する手軽さは、多くの解説記事が「おすすめ」として挙げる理由でもあります。

position absoluteとtransformを使う方法

もう一つの定番が、絶対配置を使う方法です。親要素にposition: relative;を、画像に絶対配置とtransformを指定します。

<div class="relative">
  <img src="sample.jpg" class="center-abs" alt="">
</div>

<style>
.relative {
  position: relative;
  height: 300px;
}
.center-abs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

ここでの仕組みが少し面白いところです。top: 50%; left: 50%;で画像の左上の角を中央に移動させ、transform: translate(-50%, -50%)で画像自身の幅と高さの半分だけ戻すことで、画像の中央が親要素の中央にぴたりと重なります。

背景の上に画像を重ねたいときなど、他の要素と重ねる配置で重宝します。

各方法の使い分けを整理する

どの方法を選べばいいか迷ったときのために、特徴を比べてみましょう。

迷ったら、横だけならtext-alignかmargin auto、縦も絡むならFlexbox、と覚えておけば大きく外しません。flex-basisの考え方も一緒に理解しておくと、Flexboxをより自在に扱えるようになります。

画像が親要素からはみ出す場合の対処

少し応用的な話になります。

画像が親要素の幅より大きい場合でも、中央を保ったまま左右にはみ出させたいことがあります。こうしたケースでは、Flexboxのjustify-content: center;が役立ちます。

.wrapper {
  display: flex;
  justify-content: center;
}

これで画像が親幅を超えても、中央を基準にして左右均等にはみ出してくれます。

また、margin-left: calc(50% - 画像幅の半分);のように計算式で中央位置を求めるテクニックもあります。少しトリッキーですが、特定の状況では有効な選択肢です。

よくある質問

text-align centerが効かないのはなぜですか

text-alignはインライン要素にしか効きません。画像にdisplay blockを指定していると効かなくなるので、その場合はmargin autoやFlexboxに切り替えてください。

margin autoで中央にならないのはどうしてですか

margin autoで左右中央にするには、対象がブロック要素で、かつ幅が指定されている必要があります。imgにdisplay blockを付け忘れていないか確認してみてください。

Flexboxとposition absoluteはどちらを使うべきですか

通常のレイアウトならFlexboxが扱いやすくおすすめです。他の要素の上に重ねて配置したいなど、特殊な重なりが必要な場合にposition absoluteを検討するとよいでしょう。

レスポンシブ対応で崩れにくいのはどの方法ですか

Flexboxが最も柔軟で崩れにくい傾向があります。画像側にmax-width: 100%;を併用すると、画面幅に応じて画像が縮み、はみ出しも防げます。

複数の画像を横並びで中央に揃えるにはどうすればいいですか

親要素にtext-align centerを指定するか、Flexboxでjustify-content: center;を使う方法が簡単です。画像間の余白を調整したい場合はFlexboxにgapを加えると便利です。

まとめ

CSSの画像中央寄せは、状況に応じて最適な方法が変わります。横方向だけならtext-alignやmargin auto、縦横両方ならFlexbox、重なりが必要ならposition absoluteと、目的に合わせて選ぶことが大切です。

まずはFlexboxのjustify-contentとalign-itemsを手に覚えさせておくと、多くの場面に対応できます。実際に手を動かしながら、少しずつ引き出しを増やしていっていただければと思います。他のレイアウト技術とあわせて学びたい方は、css アニメーションやウェブデザインの参考もあわせて眺めてみると、表現の幅がさらに広がるはずです。