So lassen Sie das Bild in CSS in der Mitte oben und unten erscheinen

Methoden zur Verwendung von CSS, um das Bild nach oben und unten zu zentrieren: Verwenden Sie Flexbox, legen Sie die Flexrichtung des übergeordneten Containers auf „Spalte“ fest, justify-content und align-items auf zentriert. Verwenden Sie die absolute Positionierung, stellen Sie die Position des Bildes auf absolut, oben und links auf 50 % ein und verwenden Sie das Transformationsattribut für den Versatz. Um ein Rasterlayout zu verwenden, stellen Sie die Anzeige des übergeordneten Containers auf Raster und die Platzierung von Elementen auf die Mitte ein. Verwenden Sie das Objektanpassungsattribut, um das Bild zu zentrieren

So verwenden Sie CSS, um das Bild nach oben und unten zu zentrieren

In CSS können Sie die folgende Methode verwenden, um das Bild nach oben und unten zu zentrieren:

Methode 1: Flexbox verwenden

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

img {
  height: 100px;
}

Methode zwei: Absolute Positionierung verwenden

.container {
  position: relative;
}

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

Methode drei: Rasterlayout verwenden

.container {
  display: grid;
  place-items: center;
}

img {
  height: 100px;
}

Methode vier: Objektanpassungsattribut verwenden

img {
  object-fit: contain;
}

Methode fünf: Verwenden padding

.container {
  padding: 20px 0;
}

img {
  height: 100px;
}

Vorschläge zur Auswahl einer Methode:

• Wenn Sie weitere Elemente rund um das Bild benötigen, verwenden Sie Flexbox oder Rasterlayout.
• Wenn die Bildgröße fest ist, verwenden Sie die absolute Positionierung oder das Objektanpassungsattribut.
• Wenn die Bildgröße nicht festgelegt ist, wird empfohlen, das Flexbox- oder Rasterlayout zu verwenden.

Das obige ist der detaillierte Inhalt vonSo lassen Sie das Bild in CSS in der Mitte oben und unten erscheinen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!