Mehrere Möglichkeiten zur vertikalen und horizontalen Zentrierung in CSS3 mit unbestimmter Höhe und Breite

1. Flexibles Layout

.Vater {
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
}

Diese Methode ist nicht kompatibel

2. Positionieren + Transformieren

.Sohn {
    Position: absolut;
    links: 50%;
    oben: 50 %;
    transformieren: übersetzen(-50 %, -50 %);
}

IE9 und darunter unterstützen das Transform-Attribut nicht

3. Tabelle + Tabellenzelle

.Vater {
    Anzeige: Tabelle;
}
.Sohn {
    Anzeige: Tabellenzelle;
    vertikale Ausrichtung: Mitte;
      Textausrichtung: zentriert;
}

4. :vor + Anzeige:Inline-Block

.Vater {
  Textausrichtung: zentriert;
}
.Vater::vor {
  Inhalt: '';
  Anzeige: Inline-Block;
  Höhe: 100%;
  vertikale Ausrichtung: Mitte;
}
.Sohn {
  Anzeige: Inline-Block;
}

Damit ist dieser Artikel über verschiedene Möglichkeiten zur Verwendung der vertikalen und horizontalen Zentrierung mit variabler Höhe und Breite in CSS3 abgeschlossen. Weitere Informationen zur vertikalen und horizontalen Zentrierung mit variabler Höhe und Breite in CSS3 finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!