Vertikale Zentrierungsinhalte k?nnen in CSS auf verschiedene Weise implementiert werden. Am direktesten ist die Verwendung von Flexbox. 1. Verwenden Sie Flexbox: Durch Einstellen des Containers zum Anzeigen: Flex und in Verbindung mit Ausrichtungsma?nahmen: Mitte kann die vertikale Zentrierung von untergeordneten Elementen leicht erreicht werden. 2. Kombination aus absoluter Positionierung und Transformation: Geeignet für absolute Positionierungselemente, durch Einstellen von oberen und links auf 50%und anschlie?end Translate (-50%, -50%), um Zentrierung zu erreichen; 3.. Wenn nur vertikale Zentrierung erforderlich ist, verwenden Sie Align-Items: Center. Diese Methoden sind mit modernen Browsern kompatibel und sehr praktisch.

Das vertikale Zentrieren von Inhalten in CSS kann schwierig sein, insbesondere weil es sich je nach Layout und Kontext unterschiedlich verh?lt. Es gibt jedoch mehrere zuverl?ssige Techniken, die in modernen Browsern gut funktionieren.

Flexbox ist die einfachste Methode

Die Verwendung von Flexbox ist bei weitem die einfachste und h?ufigste Art, etwas vertikal zu zentrieren. Alles, was Sie ben?tigen, ist ein Container mit display: flex und verwenden Sie dann align-items: center . Dies zentriert den Inhalt vertikal im Container.

Zum Beispiel:

 .Container {
  Anzeige: Flex;
  Ausrichtung: Zentrum;
  H?he: 100px;
}

Dies eignet sich hervorragend für Dinge wie Tasten, NAV-Artikel oder Elemente auf Blockebene, bei denen der Inhalt unabh?ngig von seiner H?he zentriert werden soll.

Eine Sache, die Sie beachten sollten: Dies betrifft alle Flex -Elemente im Container. Wenn Sie also nur einen bestimmten Gegenstand zentrieren m?chten, stellen Sie sicher, dass es in seiner eigenen Wrapper isoliert ist.

Absolute Positionierung mit Transformation

Wenn Sie mit einem Element zu tun haben, das absolut positioniert ist, hilft Flexbox nicht direkt. In diesen F?llen ist ein beliebter Trick die position: absolute (oder fixed ) mit einer CSS -Transformation.

So wie: wie:

 .zentriert {
  Position: absolut;
  Top: 50%;
  Links: 50%;
  Transformation: Translate (-50%, -50%);
}

Diese Technik bewegt das Element um 50% der Gr??e des Elternteils nach unten und rechts und verschiebt es dann wieder nach oben und links von der H?lfte seiner eigenen Breite und H?he - und zentriert sie effektiv.

Es ist besonders nützlich, wenn Sie die genauen Abmessungen des Elements, das Sie zentrieren, nicht kennen, was es flexibler macht, als die R?nder manuell zu setzen.

Grid bietet eine weitere saubere L?sung

CSS Grid verfügt au?erdem über integrierte Ausrichtungsfunktionen, mit denen Sie Inhalte einfach konzentrieren k?nnen. Indem Sie den Container anstellen display: grid und mit place-items: center , erhalten Sie sowohl vertikale als auch horizontale Zentrierung in einer Linie.

 .Container {
  Anzeige: Grid;
  Orts-Element: Zentrum;
  H?he: 200px;
}

Dies ist eine sch?ne Alternative zu Flexbox, insbesondere wenn Sie bereits ein Netz für das Layout verwenden. Es verh?lt sich ?hnlich, h?lt aber Ihre Stile konsistent, wenn das Netz Ihr Hauptlayout -Tool ist.

Beachten Sie einfach, dass place-items sowohl die Zeilen- als auch die Spaltenausrichtung festlegt. Wenn Sie also nur vertikale Zentrierung m?chten, würden Sie stattdessen align-items: center verwenden.

Es gibt auch andere Methoden-wie die Verwendung von Tabellenzell-Display-Eigenschaften oder JavaScript-, aber die oben genannten sind die praktischsten und heute am h?ufigsten unterstützten. Abh?ngig von Ihren Layoutanforderungen und den Browser -Support -Anforderungen ist Flexbox oder Grid normalerweise die beste Wahl.

Grunds?tzlich ist das.

Das obige ist der detaillierte Inhalt vonWas sind einige g?ngige Techniken für vertikal zentrierende Inhalte mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!