Wie zentriere ich ein untergeordnetes Element vertikal in einem Div?

Element vertikal innerhalb eines <div> zentrieren Element

Beim Ausrichten von Elementen innerhalb einer Webseite ist es entscheidend, den Unterschied zwischen der Ausrichtung von Elementen relativ zum Fenster oder relativ zu ihrem übergeordneten Container zu verstehen. Bei Verwendung links: 50 %; Zentriert ein Element innerhalb des gesamten Fensters und richtet ein Element innerhalb seines direkten übergeordneten Elements aus. <div> erfordert einen anderen Ansatz.

Um eine vertikale Zentrierung innerhalb eines <div> zu erreichen, führen Sie die folgenden Schritte aus:

1. Text-align:center hinzufügen; zum übergeordneten <div>. Dadurch wird sichergestellt, dass alle untergeordneten Elemente horizontal zur Mitte ausgerichtet sind.
2. Damit das untergeordnete Element vertikal zentriert ist, wenden Sie margin:auto; an. Dadurch wird der Browser angewiesen, die oberen und unteren Ränder des Elements automatisch anzupassen, um den verbleibenden Platz gleichmäßig zu verteilen.

Ein Beispiel-HTML- und CSS-Code, der dies demonstriert:

<div>

#parent {
  text-align: center;
}

#child {
  margin: auto;
}

In diesem Beispiel ist das untergeordnete Element sowohl horizontal als auch vertikal innerhalb des übergeordneten <div> zentriert.

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein untergeordnetes Element vertikal in einem Div?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!