So zentrieren Sie ein Bild vertikal in CSS

Es gibt mehrere Möglichkeiten, ein Bild in CSS vertikal zu zentrieren: Verwenden Sie Flexbox, um den übergeordneten Container auf Flexbox festzulegen, und zentrieren Sie das Bild über align-items: center. Verwenden Sie transform, um die translatorY-Eigenschaft des Bildes auf -50 % zu setzen, es um 50 % nach oben zu verschieben und zu zentrieren. Stellen Sie den oberen und unteren Rand des Bildes auf „Auto“ ein, sodass es automatisch relativ zum übergeordneten Element zentriert wird.

Bild vertikal in CSS zentrieren

In CSS gibt es mehrere Möglichkeiten, ein Bild vertikal zu zentrieren. Zu den am häufigsten verwendeten Methoden gehören:

1. Flexbox

Mit Flexbox können Sie den Container auf Flexbox einstellen und das Bild als direktes untergeordnetes Element verwenden. Anschließend können Sie untergeordnete Elemente (einschließlich Bilder) mithilfe des Attributs align-items: center; vertikal zentrieren. align-items: center; 属性将子元素（包括图像）垂直居中。

<code class="css">.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image {
  max-width: 100%;
  height: auto;
}</code>

2. transform

transform 允许应用转换到元素，包括垂直平移。通过将图像的 transform 属性设置为 translateY(-50%)，可以将其向上移动 50%，从而使其垂直居中。

<code class="css">.image {
  max-width: 100%;
  height: auto;
  transform: translateY(-50%);
}</code>

3. margin

在某些情况下，可以使用 margin 属性来垂直居中图像。为此，需要设置图像的顶部和底部 margin 为 auto

<code class="css">.image {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}</code>

2. transform

transform ermöglicht die Anwendung von Transformationen auf Elemente, einschließlich vertikaler Übersetzung. Indem Sie die Eigenschaft transform des Bildes auf translateY(-50%) setzen, können Sie es um 50 % nach oben verschieben und so vertikal zentrieren.

rrreee

3. Rand
• In einigen Fällen können Sie die Randeigenschaft verwenden, um das Bild vertikal zu zentrieren. Stellen Sie dazu den oberen und unteren Rand des Bildes auf auto ein.
rrreee
• Wählen Sie die beste Methode

🎜🎜Die Auswahl der Methode, die für Ihre Situation am besten geeignet ist, hängt von Ihrem spezifischen Layout und Ihren Bedürfnissen ab. Hier einige Richtlinien: 🎜🎜🎜Wenn sich das Bild in einem Flexbox-Container befindet, ist Flexbox die einfache und effektive Möglichkeit, dies zu tun. 🎜🎜 Transformation ist eine gute Wahl, wenn sich das Bild nicht in einem Flexbox-Container befindet und Sie zusätzliche Transformationen darauf anwenden möchten. 🎜🎜Wenn das Bild relativ zum übergeordneten Element eine feste Breite hat, ist der Rand eine einfache Wahl. 🎜🎜

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