Früher war das Zentrieren von Elementen mit   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. HTML und CSS  Okay, lasst uns loslegen.   https://youtu.be/XMH4c1xIZtE?embedable=true  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   Elements platziert, welches das rote Kästchen ist, das wir hier sehen.  div  Wir werden für diese Methode die absolute Positionierung verwenden, also fügen wir sie zu unserem   Element hinzu. strong   strong { position: absolute; }  Damit dies nun ordnungsgemäß funktioniert, muss unser   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   div { position: relative; }  Jetzt können wir unser Element um fünfzig Prozent der Höhe unseres   und über fünfzig Prozent der Breite nach unten positionieren. Um von oben nach unten zu positionieren, können wir die neue logische Eigenschaft   mit einem Wert von fünfzig Prozent verwenden. Und um von links nach oben zu positionieren, können wir   mit dem gleichen Wert von fünfzig Prozent verwenden. div inset-block-start inset-inline-start     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   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? div  Es ist eigentlich ganz einfach. Wir können die neue CSS-   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. translate     strong { ... translate: -50% -50%; }  Und los geht's. Perfekt zentriert.  Hier ist das letzte Arbeitsbeispiel mit Positionierung und Übersetzung:   https://codepen.io/brianmtreese/pen/PoLYmKW?embedable=true  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   und dem Wert „center“ an der Mitte entlang der x-Achse ausrichten. Und zu guter Letzt können wir mit der Eigenschaft   und dem gleichen Wert von center eine Ausrichtung entlang der y-Achse durchführen. justify-content align-items     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:   https://codepen.io/brianmtreese/pen/bGZbWgW?embedable=true  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   ist und noch weniger Code erfordert. flex  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     . 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   und   hinzufügen. Es funktioniert genauso. display grid justify-content: center align-items: center   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:   https://codepen.io/brianmtreese/pen/zYbOwoM?embedable=true  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.  Auch   veröffentlicht. hier

Buy Me a Coffee

Dieses Audio ist in der Originalsprache der Geschichte produziert!

3 moderne CSS-Techniken zum Zentrieren von Elementen

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

HackerNoon Decoded 2024: Celebrating Our Management Community!

HackerNoon Decoded 2024: Celebrating Our Tech Stories Community!

Starting 2025 with New Features: Settings Dashboard, HackerNoon Decoded, Updated Search UI, and More

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

HackerNoon Decoded 2024: Celebrating Our Management Community!

HackerNoon Decoded 2024: Celebrating Our Tech Stories Community!

Starting 2025 with New Features: Settings Dashboard, HackerNoon Decoded, Updated Search UI, and More

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps