Verschiedene CSS-Zentrierungsmethoden

CSS horizontal zentrierter Text-align:center and margin:0 auto

Diese beiden Methoden werden für die horizontale Zentrierung verwendet, die erstere gilt für das übergeordnete Element wird gesetzt und letzteres wird für das untergeordnete Element gesetzt. Die erste Voraussetzung dafür, dass sie funktionieren, ist, dass die untergeordneten Elemente nicht von Float betroffen sein dürfen, sonst ist alles umsonst. margin:0 auto

kann auch als margin:0 auto 0 auto geschrieben werden. Kinder, die es nicht verstehen, können selbst nach Informationen über CSS-Abkürzungen suchen.

Vertikal zentrierte Zeilenhöhe

Was? ! Funktioniert der Rand bei der vertikalen Zentrierung nicht? Offensichtlich ist dies der Fall, wir haben nur die Verwendung von margin:0 auto, aber nicht auto 0. Die Zeilenhöhe wirkt sich auch auf das übergeordnete Element aus. Wenn sein Wert dem Höhenwert des übergeordneten Elements

entspricht, wird der interne Text automatisch vertikal zentriert. Es scheint, als wäre das nur Text, was schade ist.

Die universelle Positionsmethode

Diese Methode kann als wirklich universell bezeichnet werden. Wenn Sie Probleme mit einem Element haben, das nicht zentriert werden kann, können Sie es entschlossen und nahezu ohne Nebenwirkungen einsetzen. Dies ist definitiv eine der unverzichtbaren Methoden für Front-End-Ingenieure, um zu Hause zu reisen.

Die spezifische Methode ist sehr einfach. Schreiben Sie zunächst „positon:relative“ auf das übergeordnete Element. Dies geschieht, wenn das untergeordnete Element mit „position:absolute“ markiert ist im Weltraum positioniert. Geben Sie als Nächstes die Höhe und Breite des untergeordneten Elements ein.

Einige Browser führen beim Parsen zu unerwarteten Fehlausrichtungen. Dann kommt der Kern der gesamten Methode. Addieren Sie oben: 50 % und margin-top: eine negative Zahl mit der Hälfte des Höhenwerts Wert. . Nachdem Sie es geklärt haben, können Sie CSS wie folgt für Ihre untergeordneten Elemente schreiben (natürlich muss das übergeordnete Element auch zuerst Breite und Höhe schreiben)

{width:100px;height:80px;position:absolute; :50%;left:50%;margin-left:50px;margin-top:40px>

Aktualisieren Sie als Nächstes die Seite.

Der Vorteil dieser Methode besteht darin, dass der Inhalt unabhängig von der Form sofort zentriert werden kann. Der Nachteil besteht darin, dass das Element einen bestimmten Breiten- und Höhenwert haben muss. Andernfalls müssen Sie möglicherweise Javascript verwenden. Lassen Sie uns ein paar kleine Berechnungen durchführen.