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

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

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

Text-Align

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

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

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

Margin: Auto

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

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

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

img {
  margin: auto;
  display: block;
}

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

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

Display: Flex

画像を横方向で中央に配置する 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

縦方向を揃える場合にも、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 と一緒に使用すると、要素を垂直方向に配置できます。

Position: Absolute と Transform プロパティ

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

Step 1: Position プロパティを Absolute に定義する

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

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

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

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

Step 2: Top と Left プロパティを定義する

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

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

Step 3: Transform プロパティを定義する

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

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

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

水平方向と垂直方向の中央揃えには他にも方法がありますが、最も一般的な方法を説明しました。