CSS を使って画像を縦横中央に配置する方法

原文: How to Center an Image Vertically and Horizontally with CSS

多くのデベロッパーは画像の扱いに苦労します。レスポンシブ対応や位置の処理、中でもページの中央に画像を配置することは特に困難です。

そこで、この投稿では、さまざまな CSS のプロパティを使用して画像を縦と横の両方で中央に配置する方法で最もよく使われるものをお見せします。

過去の投稿では、CSS の Position や Display プロパティを扱っています。もしこれらのプロパティに馴染みがなければ、この記事を読む前にそちらを確認することをおすすめします。

この記事の動画版はこちらです。

画像を横方向で中央に配置する

まずは、3 つの異なる CSS プロパティを使用して、画像を横方向で中央に配置することから始めましょう。

画像を横方向で中央に配置する最初の方法は、text-align プロパティを使用することです。しかし、この方法は画像が <div> などのブロックレベルコンテナ内に含まれている場合のみ成功します。

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

<div>
  <img src="your-image.jpg">
</div>

画像を中央に配置する別の方法には、margin: auto プロパティを使用することが挙げられます (左右のマージンに対して)。

しかし、margin: auto プロパティを使用するだけでは、画像に適用できません。margin: auto を使用しなければならない場合、追加で 2 つのプロパティも使用する必要があります。

margin-auto プロパティはインライン要素に何の効果も発揮しません。<img> タグはインライン要素であるため、ブロックレベル要素に変える必要があります。

img {
  margin: auto;
  display: block;
}

次に、幅を指定する必要もあります。これにより、左右のマージンが残りの空白スペースを取り、自動整列させることができます。このようにすると (100% の幅を指定しない限り) うまくいきます。

img {
  width: 60%;
  margin: auto;
  display: block;
}

画像を横方向で中央に配置する 3 つ目の方法は、display: flex プロパティを使用することです。text-align プロパティをコンテナ (外側の要素) に対して使用したように、display: flex もコンテナに対して使用します。

しかし、display: flex の使用だけでは不十分です、コンテナは justify-content という追加のプロパティを持たなければなりません。

div {
  display: flex;
  justify-content: center;
}

img {
  width: 60%;
}

justify-content プロパティは display: flex と一緒に使われて初めて機能し、画像を中央に配置できます。

最後に、画像の幅はコンテナの幅より小さくなければなりません。そうでなければ、スペースの 100％を取り、中央配置することができなくなります。

重要: display: flex プロパティは古いバージョンのブラウザではサポートされていません。詳しくはこちらをご覧ください。

縦方向を揃える場合にも、display: flex が非常に便利です。

コンテナの高さが 800px あるのに対し、画像の高さが 500px しかない場合について考えてみましょう。

div {
  display: flex;
  justify-content: center;
  height: 800px;
}

img {
  width: 60%;
  height: 500px;
}

この場合、コンテナに align-items: center という 1 行のコードを追加するだけで上手くいきます。

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 800px;
}

align-items プロパティは、display: flex と一緒に使用すると、要素を垂直方向に配置できます。

縦方向を揃えるもう 1 つの方法は、position プロパティと transform プロパティを一緒に使用することです。これは少し複雑なので、順を追って説明しましょう。

まず、画像の配置動作を static から absolute に変更します。

div {
  height: 800px;
  position: relative;
  background: red;
}

img {
  width: 80%;
  position: absolute;
}

また、相対配置されたコンテナ内に置く必要があるため、そのコンテナの div に対して position: relative を追加します。

次に、画像の top プロパティと left プロパティを定義し、それらを 50% に設定します。これにより、画像の開始点 (左上) がコンテナの中心に移動します。

img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
}

しかし、Step 2 では、画像がコンテナの外に部分的にはみ出てしまいます。それを内側に戻す必要があります。

transform プロパティを定義し、その X 軸と Y 軸に -50% を追加するとうまくいきます。

img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

水平方向と垂直方向の中央揃えには他にも方法がありますが、最も一般的な方法を説明しました。この投稿が、ページの中央に画像を配置する方法を理解するのに役立つことを願っています。

Web 開発について詳しく知りたい場合は、お気軽に私の YouTube チャンネルを見てみてください。

読んでくれてありがとうございます！