Um ein dival und vertikal zu zentrieren, wird empfohlen, Flexbox zu verwenden: Stellen Sie das Containeranzeige: Flex ein und kooperieren Sie sie mit Justify-In-Intent-und Align-Items als Zentrum; 2. Verwenden Sie Grid Layout: Anzeige einstellen: Gitter und Orts-Items: Mitte; 3. Traditionelle Methoden k?nnen Positionierung und Transformation verwenden: Links und oben auf 50%einstellen und übersetzen (-50%, -50%); Beachten Sie, dass der Container eine klare H?he haben muss, die übergeordnete Positionierung vernünftigerweise festgelegt und die Verarbeitung von Inhalten überlauf berücksichtigt.

Ein div zu wollen, um horizontal und vertikal in der Seite zu zentrieren, ist tats?chlich eine übliche CSS -Anforderung. Es gibt viele M?glichkeiten, es umzusetzen, aber der einfachste, moderne und praktische Weg besteht darin, Flexbox- oder Gitterlayouts zu verwenden.

Zentrieren mit flexbox (empfohlen)

Flexbox ist derzeit eine der am h?ufigsten verwendeten Methoden, insbesondere für Ausrichtungsvorg?nge im eindimensionalen Layout.

 .Container {
  Anzeige: Flex;
  Justify-Content: Center; /* Horizontales Zentrum*//
  Ausrichtung: Zentrum; /* vertikales Zentrum*///
  H?he: 100VH; /* Der Beh?lter muss eine H?he haben*/
}

Nach dieser Einstellung werden die untergeordneten Elemente im .container automatisch zentriert.

HINWEIS: Wenn der übergeordnete Container keine klare H?he hat, z. B. nur height: 100% , stellen Sie sicher, dass sein oberes Element die tats?chliche H?he hat, sonst kann er nicht wirksam werden.

Zentrum mit Gitter (eine weitere moderne L?sung)

CSS -Gitter kann auch leicht zentriert werden:

 .Container {
  Anzeige: Grid;
  Orts-Element: Zentrum;
  H?he: 100VH;
}

Dies ist auf einfachere Weise geschrieben, place-items ist die Abkürzung von align-items und justify-items .

Traditionelle Methode: Positionierung der Transformation

Wenn Sie mit einigen alten Browsern kompatibel sein müssen oder nur die absolute Positionierung verwenden m?chten, um sie zu steuern, k?nnen Sie die folgende Methode verwenden:

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

Diese Methode eignet sich für Elemente, die vom Dokumentenfluss getrennt sind, z. B. Pop-up-Fenster, Eingabeaufforderungsk?stchen usw. Denken Sie jedoch daran, position: relative zum übergeordneten Container, andernfalls basiert die Positionierung auf dem Ansichtsfenster.

Achten Sie auf die kleinen Details

• Wenn Sie flex oder grid verwenden, sollten Sie sich bewusst, dass sie sich auf die Anordnung der Kinderelemente auswirken, und es kann m?glicherweise zus?tzlichen Abstand erforderlich sein.
• Denken Sie daran, dass zu viel Inhalt im zentrierten Element den Bildschirmbereich überschreiten kann. Denken Sie daran, overflow hinzuzufügen.
• text-align und line-height k?nnen ebenfalls zentriert werden, aber das ist eine andere Sache.

W?hlen Sie im Grunde nur eine aus, die zu Ihrer aktuellen Projektstruktur passt.

Das obige ist der detaillierte Inhalt vonWie man einen divisionen und vertikal mit CSS zentriert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!