So zentrieren Sie ein Bild in einem Div mit CSS

Die Methoden zum Zentrieren von Bildern in Divs in CSS sind: Textausrichtung: geeignet für die vertikale Zentrierung von Bildern und Text. Flexbox: Geeignet zur horizontalen und vertikalen Zentrierung von Bildern. Konvertierung: Funktioniert für Bilder mit fester Größe. Automatische Ränder: geeignet für Situationen, in denen die Breite des Bildes bekannt ist.

So zentrieren Sie das Bild in einem Div in CSS

Methode 1: text-align

div {
  text-align: center;
}

img {
  display: inline-block;
}

Diese Methode eignet sich für Situationen, in denen das Bild zusammen mit dem Text vertikal zentriert werden soll .

Methode 2: Flexbox

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

img {
  max-width: 100%;
}

Flexbox ermöglicht ein flexibles Layout. Diese Methode eignet sich für Situationen, in denen Bilder horizontal und vertikal zentriert werden müssen.

Methode 3: Transformieren

div {
  position: relative;
}

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

Diese Methode verwendet absolute Positionierung und Transformation und eignet sich für Bilder mit fester Größe.

Methode 4: Rand automatisch

div {
  text-align: center;
}

img {
  margin: auto;
}

Rand: Automatisch zentriert das Bild automatisch, kann aber nur verwendet werden, wenn die Bildbreite bekannt ist.

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie ein Bild in einem Div mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!