実行できるCSSドキュメント: 画像の中央寄せ

Q: HTML で画像を中央寄せにするには？

画像を含む要素に text-align: center を指定します。例: 。画像は初期状態でインラインなので、文章の中の単語と同じように中央に寄ります。

Q: margin auto で画像を中央寄せにするには？

先に画像を block にします: img { display: block; margin: 0 auto; }。auto の margin はインライン要素を中央に寄せません。画像は変更するまでインラインです。

Q: 画像を上下左右の中央に寄せるには？

コンテナを高さのある grid (または flexbox) にします: .box { display: grid; place-items: center; height: 300px; }。すると画像はボックスの真ん中に置かれます。

Q: タグや align="center" で画像を中央寄せにできますか？

できません。 と の align 属性は HTML5 では廃止されています。ブラウザは古いページのために をまだ表示しますが、画像の align="center" は横ではなく行の中の縦方向の位置を揃えます。CSS を使いましょう。

すぐわかる答え: 親に text-align

<img> はインライン要素で、文章の行の中に単語のように置かれます。そのため、文字を中央揃えにするのと同じく、親に text-align: center を指定して中央に寄せます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center an image</title>
  <style>
    .wrap { text-align: center; border: 1px dashed #9ca3af; padding: 8px; }
  </style>
</head>
<body>
  <div class="wrap" id="wrap">
    <img id="img" width="160" height="100" alt="Blue rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%232563eb'/%3E%3C/svg%3E">
  </div>
</body>
</html>

スタイルは画像ではなく div に書きます。<img> 自体に text-align: center を指定しても何も起きません。画像の中には揃える文字がないからです。

方法 2: display: block と margin auto

画像自体にスタイルを付けたいなら、block にして左右の margin を auto にします。左右の余白が均等に分けられます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and margin auto</title>
  <style>
    .centered {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      height: auto;
    }
    .frame { border: 1px dashed #9ca3af; padding: 8px 0; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div class="frame">
    <img class="centered" id="img" width="160" height="100" alt="Green rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%2316a34a'/%3E%3C/svg%3E">
  </div>
  <div class="frame">
    <img style="margin: 0 auto;" id="inline" width="160" height="100" alt="Gray rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%239ca3af'/%3E%3C/svg%3E">
  </div>
</body>
</html>

灰色の画像には margin: 0 auto がありますが、行の始まりにとどまっています。auto の margin はインライン要素には効きません。足りないのは display: block です。max-width: 100% と height: auto で、縦横比を保ったまま、狭い画面で画像がはみ出さないようにしています。

方法 3: flexbox か grid (縦方向の中央寄せも)

ボックスの中で画像を両方向の中央に寄せるには、ボックスに高さを与え、grid か flexbox で内容を中央に置きます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center vertically</title>
  <style>
    .box {
      display: grid;
      place-items: center;
      height: 220px;
      background: #f3f4f6;
      border: 1px solid #d1d5db;
    }
  </style>
</head>
<body>
  <div class="box" id="box">
    <img id="img" width="120" height="120" alt="Amber circle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='60' cy='60' r='60' fill='%23f59e0b'/%3E%3C/svg%3E">
  </div>
</body>
</html>

flexbox で書くと display: flex; justify-content: center; align-items: center; です。どちらの場合も、ボックスに画像より大きい高さがないと、中央に寄せる余白がありません。同じ方法はどんな要素にも使えます。すべての方法の比較は div の中央寄せのページにあります。

キャプション付きの画像を中央寄せにする

キャプション付きの写真は <figure> に入れます。figure の内容を中央に揃えると、画像とキャプションが一緒に並びます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Figure</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    figure {
      margin: 0;
      text-align: center;
    }
    figure img { max-width: 100%; height: auto; }
    figcaption { font-size: 14px; color: #4b5563; margin-top: 6px; }
  </style>
</head>
<body>
  <figure id="fig">
    <img id="img" width="200" height="120" alt="A mountain drawing"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Crect width='200' height='120' fill='%23bfdbfe'/%3E%3Cpath d='M0 120L70 40L140 120Z' fill='%2316a34a'/%3E%3Cpath d='M80 120L150 55L200 100V120Z' fill='%2315803d'/%3E%3C/svg%3E">
    <figcaption id="cap">Figure 1. A centered image with its caption.</figcaption>
  </figure>
</body>
</html>

複数の画像を横に並べて中央に寄せる

ロゴやサムネイルを横に並べるなら flexbox の出番です。justify-content: center でまとめて中央に寄せ、gap で間隔を空け、flex-wrap で小さい画面では中央に寄せたまま折り返します:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Centered row</title>
  <style>
    .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border: 1px dashed #9ca3af;
    }
  </style>
</head>
<body>
  <div class="row" id="row">
    <img width="80" height="50" alt="Logo one" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%232563eb'/%3E%3C/svg%3E">
    <img width="80" height="50" alt="Logo two" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%2316a34a'/%3E%3C/svg%3E">
    <img width="80" height="50" alt="Logo three" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%23f59e0b'/%3E%3C/svg%3E">
  </div>
</body>
</html>

どの方法を使うか

状況	使う方法
段落やシンプルな block の中の画像	親に `text-align: center`
画像にしかスタイルを付けられない	`display: block; margin: 0 auto;`
ボックスの中で両方向の中央に寄せる	ボックスに grid の `place-items: center` (または flexbox)
画像を横に並べる	flexbox と `justify-content: center`
キャプション付きの画像	`<figure>` と `text-align: center`
内容ではなく背景の画像	`background-position: center`。background-image を参照

古い方法と、使わない理由

古いチュートリアルでは、今もこんな書き方が見つかります:

<!-- obsolete: do not use -->
<center><img src="logo.png" alt="Logo"></center>
<img src="logo.png" alt="Logo" align="center">

<center> と align 属性は HTML から削除されました。ブラウザは後方互換のために <center> をまだ表示しますが、画像の align="center" は横方向の中央寄せにすらなりません。ブラウザはこれを行の中の縦方向の配置として扱います。上の CSS の方法のどれかを使いましょう。

よくある間違い

<img> に text-align: center を付ける。 親に付けます。
インラインの画像に margin: 0 auto。 display: block を追加しましょう。
親に高さがないまま縦方向の中央に寄せる。 ボックスが画像の大きさまで縮み、中央に寄せる余白が残りません。
float: center。 そんな値はありません。float は左右のどちらかにしか寄りません。
alt を忘れる。 中央に寄せた画像にも代替テキストが必要です。alt="" は純粋な装飾の画像だけに使いましょう。
画像が引き伸ばされる。 CSS で width と height の両方を違う比率で指定すると、画像がゆがみます。片方だけ指定して height: auto を使うか、object-fit: cover を追加しましょう。

よくある質問

HTML で画像を中央寄せにするには？

画像を含む要素に text-align: center を指定します。例: <p style="text-align: center;"><img src="logo.png" alt="Logo"></p>。画像は初期状態でインラインなので、文章の中の単語と同じように中央に寄ります。

margin auto で画像を中央寄せにするには？

先に画像を block にします: img { display: block; margin: 0 auto; }。auto の margin はインライン要素を中央に寄せません。画像は変更するまでインラインです。

画像を上下左右の中央に寄せるには？

コンテナを高さのある grid (または flexbox) にします: .box { display: grid; place-items: center; height: 300px; }。すると画像はボックスの真ん中に置かれます。

<center> タグや align="center" で画像を中央寄せにできますか？

できません。<center> と <img> の align 属性は HTML5 では廃止されています。ブラウザは古いページのために <center> をまだ表示しますが、画像の align="center" は横ではなく行の中の縦方向の位置を揃えます。CSS を使いましょう。

中央寄せした画像の下に小さなすき間ができるのはなぜですか？

インラインの画像は文字のベースラインの上に置かれ、下に文字の下の部分 (ディセンダー) のための余白が残るからです。画像に display: block か vertical-align: middle を指定すると、すき間が消えます。

HTML と CSS で画像を中央寄せする方法