CSSで画像を中央配置する3つの簡単テクニック

CSSで画像を左右中央配置する前に

画像を中央に配置する前に、CSSの基本的な概念を少しだけ理解することが必要です。
CSSには主に「ブロック要素」と「インライン要素」の2種類があります。

▼ブロック要素の特徴

• 前後に改行が入る
• 幅と高さを指定できる
• 例：<div>、 <p>、<h1>〜<h6>

▼インライン要素の特徴

• 横に並ぶ
• 幅と高さを指定できない（コンテンツの大きさに依存）
• 例：<span>、<a>、<img>

画像（<img>タグ）はデフォルトでインライン要素ですが、中央配置のためにはブロック要素として扱う必要がある場面があります。

画像を中央に配置する3つの方法

インライン要素とブロック要素の違いがざっくり分かったところで、3パターンの画像の中央寄せの方法をご紹介します。

text-alignを使った方法

See the Pen css_img_center_text-align by webmagic-lab (@kkindchy-the-selector) on CodePen.

text-alignは、文字や画像に水平方向の揃え方を指定できるプロパティです。
画像を囲んでいる親であるブロック要素に指定して、その中にあるインライン要素やテキストに作用します。
勘違いされがちなのですが、画像そのものではなく、画像を囲んでいるブロックに指定することに注意です。

<div class="center-container">
  <img src="example.jpg" alt="中央配置された画像">
</div>

.center-container {
  text-align: center; /* 要素の中身を中央揃えにする */
}

▼メリット

• シンプルな構造で実装が簡単にできる
• 複数の画像やテキストを同時に中央揃えできる
• ブラウザの互換性が高い

▼注意点

• この方法は水平方向の中央揃えのみに効果があります。垂直方向の中央揃えには別の方法が必要です。
• ブロック要素には直接効果がないため、画像の周りに要素が無い場合は<div>で囲むなどの工夫が必要です。

marginを使った方法

See the Pen css_img_center_margin by webmagic-lab (@kkindchy-the-selector) on CodePen.

marginはブロック要素に対して要素の外側の上下左右の余白を指定できるプロパティです。
margin: 0 auto;にすることによって、上下の余白は0、左右の余白を自動で均等にすることで中央に配置します。
ブロック要素そのものに指定する必要がある為、インライン要素である画像を中央に寄せたい場合はブロック要素にしておく必要があります。

<img src="example.jpg" alt="中央配置したい画像" class="center-image">

.center-image {
  display: block; /* 画像をブロックレベル要素に変更 */
  margin: 0 auto; /* 左右のマージンを自動に設定 */
  width: 150px; /* 任意の画像幅を％やpxで指定 */
}

▼メリット

• 画像の幅を制御しやすい
• レスポンシブデザインに適応しやすい
• ブラウザの互換性が高い

▼注意点

• 画像の幅を指定しないと、ブロック要素にした関係で100%幅になり、画面いっぱいor親要素いっぱいに画像が広がります。
• この方法もtext-align: center;と同じく水平方向の中央揃えのみに効果があります。

flexboxを使った方法

See the Pen css_img_center_flexobx by webmagic-lab (@kkindchy-the-selector) on CodePen.

flexboxは、要素の配置を柔軟に制御できるプロパティです。親要素にflexboxを使用すると、子要素を水平方向と垂直方向の両方で要素を簡単に中央配置できます。

こちらは子要素がインライン要素でもブロック要素でも使えます。

<div class="flex-container">
  <img src="example.jpg" alt="中央配置したい画像">
</div>

.flex-container {
  display: flex; /* 親要素のブロックにフレックスを指定 */
  justify-content: center; /* 要素の中身を中央寄せに設定する */
}

▼メリット

• align-items: center;を指定することによって垂直方向の中央揃えを行える
• 複数の要素を柔軟に配置できる
• 縦並びや逆順の配置も簡単に実現できる

▼注意点

• 古いブラウザで互換性がない場合があります。(一部Internet Explorer)

まとめ

シンプルな構造であればtext-align

⇒複数の小さな画像やテキストを含む要素を中央揃えする場合に最適です。実装が簡単で、ほとんどの状況で十分な効果を発揮します。

単一画像でmarginで十分

⇒1つの大きな画像を中央に配置する場合に効果的です。画像のサイズを制御しやすく、レスポンシブデザインにも適しています。

柔軟なレイアウトにしたいならflexbox
⇒複雑なレイアウトや、垂直方向の中央揃えが必要な場合に最適です。最も柔軟性が高く、モダンなウェブデザインに適しています。