Wie zentriere ich Text in einem Div mit dynamischer Höhe vertikal?

Vertikale Zentrierung von Text in einem Div mit dynamischer Höhe

Problem:
Erzielung einer vertikalen Ausrichtung von Text innerhalb eines Div-Elements mit variabler Höhe , unabhängig von den Abmessungen des Browserfensters.

Erklärung:
Um den Text innerhalb des Div mit dynamischer Größe vertikal zu zentrieren, verwenden wir die Anzeigeeigenschaft und das Vertical-Align-Attribut.

Lösung:

1. Wrapper-Div so einstellen, dass es als Tabelle angezeigt wird:

   div {
    display: table;
   }

2. Stil das Textelement als Tabellenzelle und richten Sie es vertikal in der Mitte aus:

   h1 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
   }

Zusätzliche Hinweise:
Diese Lösung wurde mehrfach gründlich getestet Betriebssysteme und Browser, einschließlich Windows XP, Windows 7 und Linux Ubuntu, mit Internet Explorer, Opera, Firefox, Safari und Google Chrome.

Das obige ist der detaillierte Inhalt vonWie zentriere ich Text in einem Div mit dynamischer Höhe vertikal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!