3 moderne CSS-Techniken zum Zentrieren von Elementen

Früher war das Zentrieren von Elementen mit HTML und CSS ziemlich schwierig. Nun, das ist es nicht mehr. Es gibt mittlerweile viele verschiedene Möglichkeiten, dies zu tun. Und das ist gut so, denn in verschiedenen Szenarien benötigen wir möglicherweise unterschiedliche Optionen. In diesem Video sehen wir uns drei meiner Lieblingsmethoden zum Zentrieren von Elementen an: Wir verwenden die Positionierung, dann verwenden wir Flexbox und schließlich verwenden wir mein bevorzugtes CSS-Raster.

Okay, lasst uns loslegen.

Es ist wirklich so seltsam, dass es so lange so schwierig war, Elemente einfach in der Mitte eines Containers im Web zu platzieren. Nun, die horizontale Zentrierung war einfach, aber die vertikale Zentrierung war bis in die letzten Jahre nahezu unmöglich.

Verwenden der CSS-Positionierung zum Zentrieren von Elementen

Diese erste Methode, die CSS-Positionierung verwendet, gibt es wahrscheinlich am längsten, sie hat sich jedoch ein wenig weiterentwickelt, da neuere Eigenschaften auf den Markt kamen. Schauen wir uns ein Beispiel an.

Hier haben wir dieses Kästchen, das wir in diesem anderen Container mit dem roten Rand zentrieren möchten. Es ist ein starkes Element und wird direkt innerhalb eines div Elements platziert, welches das rote Kästchen ist, das wir hier sehen.

Wir werden für diese Methode die absolute Positionierung verwenden, also fügen wir sie zu unserem strong Element hinzu.

 strong { position: absolute; }

Damit dies nun ordnungsgemäß funktioniert, muss unser div einen Positionierungskontext erstellen, in dem unser Artikel positioniert werden soll. Es gibt viele verschiedene Möglichkeiten, dies zu tun, aber die beste Option für dieses Beispiel ist die relative Positionierung.

 div { position: relative; }

Jetzt können wir unser Element um fünfzig Prozent der Höhe unseres div und über fünfzig Prozent der Breite nach unten positionieren. Um von oben nach unten zu positionieren, können wir die neue logische Eigenschaft inset-block-start mit einem Wert von fünfzig Prozent verwenden. Und um von links nach oben zu positionieren, können wir inset-inline-start mit dem gleichen Wert von fünfzig Prozent verwenden.

 strong { ... inset-block-start: 50%; inset-inline-start: 50%; } 

Ok, es ist also nicht genau zentriert, oder?

Das liegt daran, dass wir das Element in der Mitte unseres div positioniert haben, seine Position jedoch auf seiner oberen linken Ecke basiert. Was wir jetzt tun müssen, ist, das Objekt wieder um fünfzig Prozent seiner Höhe nach oben und um mehr als fünfzig Prozent seiner Breite nach hinten zu verschieben. Dadurch wird es richtig in der Mitte platziert. Aber wie können wir das tun?

Es ist eigentlich ganz einfach. Wir können die neue CSS- translate verwenden. Der erste Wert wird entlang der x-Achse verschoben. Wir müssen um fünfzig Prozent zurückgehen, also fügen wir einen Wert von negativen fünfzig Prozent hinzu. Und wenn der zweite Wert entlang der Y-Achse verschoben wird, geben wir ihm den gleichen Wert von minus fünfzig Prozent.

 strong { ... translate: -50% -50%; } 

Und los geht's. Perfekt zentriert.

Hier ist das letzte Arbeitsbeispiel mit Positionierung und Übersetzung:

Das ist also eine Möglichkeit, wie wir es machen können, aber es ist nicht meine Lieblingsmethode.

Verwenden von Flexbox zum Zentrieren von Elementen

Wenn ich kann, bevorzuge ich die Verwendung von Flexbox gegenüber der Positionierung, weil es noch einfacher ist, weniger Codezeilen erfordert, keinen Positionierungskontext erfordert und ehrlich gesagt einfach eine bessere, modernere Lösung zu sein scheint. Schauen wir uns ein Beispiel an.

Ok, wir beginnen also am selben Punkt, wir haben unser äußeres Div mit dem roten Rand und dann unser inneres starkes Element.

Wir beginnen damit, dass wir aus unserem Div einen Flex-Container mit Display machen, Flex. Dann können wir unser Element mit der Eigenschaft justify-content und dem Wert „center“ an der Mitte entlang der x-Achse ausrichten. Und zu guter Letzt können wir mit der Eigenschaft align-items und dem gleichen Wert von center eine Ausrichtung entlang der y-Achse durchführen.

 div { display: flex; justify-content: center; align-items: center; } 

Und da haben Sie es: Das Element ist richtig zentriert und dieses Mal waren nur drei Codezeilen erforderlich, um dorthin zu gelangen.

Hier ist das letzte Arbeitsbeispiel mit Flexbox:

Das ist cool und manchmal muss ich das tun, aber meine Lieblingsmethode zum Positionieren von Elementen in der Mitte ist die Verwendung eines CSS-Rasters. Und noch einmal: Meine Gründe dafür sind, dass es noch einfacher als flex ist und noch weniger Code erfordert.

Verwenden des Rasters zum Zentrieren von Elementen

Ok, derselbe Ausgangspunkt mit der roten Box und dem inneren Element.

Dieses Mal machen wir unser Div zu einem Grid-Container mit dem display grid . Das Coole daran ist, dass wir bei Bedarf dieselben zwei Eigenschaften verwenden können, die wir für unser Flexbox-Beispiel verwendet haben. Wir können justify-content: center und align-items: center hinzufügen. Es funktioniert genauso.

 div { display: grid; justify-content: center; align-items: center; }

Irgendwie lustig, aber so funktioniert Grid. Es kann dieselben Box-Ausrichtungseigenschaften verwenden wie Flexbox. Aber wenn wir es so belassen würden, gäbe es wirklich keinen Vorteil, Grid zu verwenden, oder?

Stattdessen können wir diese Ausrichtungseigenschaften entfernen und durch die Eigenschaft „place-items“ ersetzen. Und wir können dieser Eigenschaft den Wert „center“ zuweisen.

 div { display: grid; place-items: center; } 

Jetzt haben wir es auf nur noch zwei CSS-Zeilen reduziert.

Hier ist das letzte funktionierende Beispiel mit CSS Grid:

Abschluss

Wie ich bereits sagte, ist es mit Sicherheit viel einfacher als früher. Aber alle diese Techniken sind immer noch sehr relevant und können aufgrund einer Reihe von Umständen erforderlich sein, daher ist es für alle Fälle gut, sie alle zu kennen. Ich würde auf jeden Fall das CSS-Raster mit der geringsten Codemenge bevorzugen, und wenn das nicht funktioniert, ist die nächstbeste Option Flexbox, und wenn keines davon funktioniert, versuchen Sie es mit der Positionierung.