Heim  >  Artikel  >  Web-Frontend  >  So legen Sie fest, dass ein Div in CSS zentriert wird

So legen Sie fest, dass ein Div in CSS zentriert wird

王林
王林Original
2021-06-07 17:43:5717706Durchsuche

Die Möglichkeit, ein Div in CSS so einzustellen, dass es zentriert wird, besteht darin, die Positionierung festzulegen, z. B. [position:absolute;] oder [margin:auto;]. Wenn wir die Browserkompatibilität vollständig berücksichtigen müssen, können wir die Flex-Layout-Methode verwenden.

So legen Sie fest, dass ein Div in CSS zentriert wird

Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer.

Um das Div so einzustellen, dass es in CSS zentriert wird, können wir dies mit den folgenden Methoden erreichen.

Positionierungsmethode: position:absolute

Sie können diese Methode verwenden, wenn das untergeordnete Div eine definierte Breite und Höhe hat. Hinweis: Die Werte von margin-top und margin-left sind die Hälfte der Höhen- und Breitenwerte. Sie können es ausprobieren und die Wirkung sehen.

So legen Sie fest, dass ein Div in CSS zentriert wird

margin:auto-Methode

Dies kann auch eine Positionierungsmethode sein. Die Verwendung dieser Methode erfordert, dass das untergeordnete Div auf einen Breitenwert eingestellt ist, andernfalls hat es keine Auswirkung. ~margin:auto wird horizontal und vertikal zentriert. Wenn Sie nur die horizontale Zentrierung festlegen, können Sie sie auf margin:auto 0 festlegen. Ähnlich verhält es sich, wenn Sie nur die vertikale Zentrierung festlegen: Kann auf Rand eingestellt werden: 0 automatisch

So legen Sie fest, dass ein Div in CSS zentriert wird

Anzeige:Tabellenzellenmethode

Diese Methode zielt hauptsächlich auf die vertikale zentrierte Ausrichtung von mehrzeiligen Textinhalten ab. Hinweis: text-align:center legt die horizontale Mittenausrichtung des Textes fest, und Vertical-align:middle legt die vertikale Mittenausrichtung fest.

So legen Sie fest, dass ein Div in CSS zentriert wird

transform:translate(x,y)-Methode

Dies ist ein neues Attribut in CSS3. Wenn das untergeordnete Element die Breiten- und Höhenwerte nicht festlegt, können Sie dies mit dieser Methode erreichen. Dies kann verwendet werden, wenn wir adaptive Seiten erstellen.

So legen Sie fest, dass ein Div in CSS zentriert wird

Vorher-Nachher-Pseudoelementmethode

Dadurch werden auch die untergeordneten Elemente vertikal zentriert. Wenn Sie es dennoch horizontal zentrieren möchten, können Sie dies mit mehreren anderen Methoden erreichen, z. B. indem Sie für untergeordnete Elemente den Wert „margin: 0 auto“ festlegen. Dadurch wird es sowohl horizontal als auch vertikal zentriert.

So legen Sie fest, dass ein Div in CSS zentriert wird

Flex-Layout-Methode

Diese Methode sollte die Browserkompatibilität vollständig berücksichtigen. Elemente, die vertikal zentriert werden müssen, müssen keine Breiten- und Höhenwerte festlegen und können in adaptiven Seiten verwendet werden, um eine horizontale und vertikale Zentrierung zu erreichen.

So legen Sie fest, dass ein Div in CSS zentriert wird

Verwandte Videoempfehlungen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie fest, dass ein Div in CSS zentriert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:So löschen Sie Float in CSSNächster Artikel:So löschen Sie Float in CSS