Ein praktischer Leitfaden zum Zentrieren in CSS

Wie ich kurz in meiner Einführung in mathematische CSS-Funktionen erwähnt habe – nachdem ich den Artikel über nützliche CSS-Tricks veröffentlicht hatte – sah ich Traffic auf dieser Seite für Schlüsselwörter wie „How to Center CSS“. Da macht es nur Sinn, dass ich endlich selbst so einen Artikel zusammenstelle.

Ich bin mir sicher, dass das Problem beim Zentrieren von Inhalten mit CSS nicht darin besteht, sich an justify-content: center; Eigentum. Es hat eher damit zu tun, dass unterschiedliche Layoutstrukturen ihre eigenen Regeln haben und möglicherweise einen bestimmten Ansatz nicht respektieren .

Aber, das Wichtigste zuerst, für wen ist dieser Leitfaden erstellt:

• Frontend-Entwickler, die sich mit den „Regeln und Vorschriften“ von CSS überfordert fühlen.
• Jeder, dem es schwer fällt, dieses Div ein für alle Mal zu zentrieren. Aaahhhh!!
• Website-Eigentümer, die mit schlecht strukturierten Vorlagen/Themen festsitzen.

In CSS wird Zentrieren oft als Vertikal, Horizontal oder Vertikal & Horizontal bezeichnet.

Sie können es auch als Links, Rechts und Links & Rechts interpretieren. Und in einigen Fällen wird es möglicherweise auch als Top & Bottom bezeichnet. Dies sind auch die Begriffe, die wir in diesem Leitfaden verwenden. Beginnen wir mit dem begehrtesten Ansatz von allen.

Inline- und Blockelemente: Textausrichtung

Eines der Dinge, die auf den ersten Blick vielleicht nicht offensichtlich erscheinen, ist, dass text-align: center; funktioniert für mehr als nur Absätze. Als Eigenschaft kann es auf jedes Element angewendet werden, das als Block betrachtet wird. Das heißt, solange Ihr Inhalt in <div> oder ein ähnliches Element eingeschlossen ist, kann er mit text-align zentriert werden.

CSS und HTML

 <style> .text-align-container { display: flex; } .text-align-container-style .item { background: #fff2ea; padding: 20px 0; text-align: center; width: 100%; } </style> <div class="text-align-container text-align-container-style"> <div class="item">Hi, I am centered.</div> </div>

Das Schöne an diesem Ansatz ist, dass er sowohl für Grid als auch für Flexbox funktioniert. Solange Sie Inhalte in das Div einschließen, funktioniert es genauso gut für Inhalte wie Bilder.

Und es funktioniert auch gut mit Listen:

Mal sehen, was passiert, wenn wir versuchen, ein <span> -Element zu zentrieren, ohne es zuerst in einen Blockcontainer zu packen.

CSS und HTML

 .span-demo-container { background: #fff2ea; padding: 20px 0; width: 100%; } .span-demo-center { text-align: center; } <div class="span-demo-container"> <span class="span-demo-center">Am I in the center?</span> </div>

Und das Ergebnis ist:

Der Grund, warum dieses <span> -Element nicht zentriert ist, liegt darin, dass es sich um ein Inline-Element handelt. Für Inline-Elemente möchten Sie immer ein übergeordnetes Element festlegen.

Wenn wir also zurückgehen und die span-demo-center Klasse nehmen und sie auf <div> anwenden, wird das Ergebnis so aussehen:

Wenn Sie mit einer großen Codebasis arbeiten oder eine schlecht strukturierte Vorlage verwenden, ist dies normalerweise der Hauptgrund dafür, dass die Zentrierung nicht funktioniert. Suchen Sie daher immer nach Block- und Inline- Elementen und sehen Sie, ob sie richtig verschachtelt sind.

Zentrierblockelemente mit fester Breite

Eine weitere beliebte Methode zum Zentrieren von Elementen ist die Verwendung von margin: auto; , das am häufigsten für Blockelemente mit fester Breite verwendet wird.

Stellen Sie sich also ein benutzerdefiniertes div in einem größeren Container vor. Und dann versuchen Sie, Inhalt in dieses benutzerdefinierte div-Element einzufügen und es zu zentrieren.

Lassen Sie uns ein Live-Beispiel machen, um es in Aktion zu sehen:

CSS und HTML

 .margin-auto-container { background: #fff2ea; padding:1rem; } .margin-auto-inner { width: 200px; padding: 1rem; background: #efba93; color: #fff; margin: 0 auto; text-align: center; } <div class="margin-auto-container"> <div class="margin-auto-inner">Div & Text centered.</div> </div>

In diesem Beispiel übernimmt die Klasse margin-auto-container den Container aus diesem Blogbeitrag – dann erstellen wir eine neue Klasse namens margin-auto-inner und wenden eine feste Breite mit benutzerdefiniertem Styling darauf an. Zuletzt wenden wir margin: 0 auto; um sicherzustellen, dass unser innerer Behälter relativ zum Hauptbehälter zentriert bleibt.

 Warum die 0? Wir fügen die 0 hinzu, weil wir den vertikalen Rand (oben und unten) unverändert lassen und den automatischen Rand auf die horizontale Ansicht (rechts und links) anwenden möchten. Sie können dies ändern, um einzelne Ränder anzugeben, z. B. „Margin: 25px auto 50px;“ Dadurch würde oben ein Rand von 25 Pixel und unten ein Rand von 50 Pixel verbleiben.

Wichtig: Der Grund Ihrer Marge: auto; ist nicht zentriert, weil Sie keine feste Breite für das Element festgelegt haben, das Sie zentrieren möchten.

Wir spezifizieren auch text-align: center; da dies den Text innerhalb des inneren Containers zentriert.

Zentrieren von Inline-Elementen mit fester Breite

Bei einem Inline-Element wird die benutzerdefinierte Breite ignoriert.

Schauen wir uns eine Demo an:

CSS und HTML

 .margin-auto-container { background: #fff2ea; padding:1rem; } .margin-auto-inner-span { width: 150px; padding: 5px; background: #efba93; color: #fff; margin: 0 auto; text-align: center; } <div class="margin-auto-container"> <span class="margin-auto-inner-span">Inline <span> element with custom width. (Not centered).</span> </div>

Und das Ergebnis ist:

Wie Sie sehen können, trotz der Einstellung margin: auto; Das Span-Inline-Element ist nicht zentriert.

Glücklicherweise gibt es dafür eine einfache Lösung. Durch Hinzufügen von display: block; -Eigenschaft zu unserer margin-auto-inner-span- Klasse hinzufügen – wir können dem Browser mitteilen, dass dieses bestimmte Element als Block behandelt werden soll. Und jetzt sollte es zentriert sein:

An dieser Stelle fragen Sie sich vielleicht, welche HTML-Elemente als Blöcke und welche als Inline betrachtet werden. Verständlich. Ich empfehle, sich die MDN-Referenz anzusehen:

• Elemente auf Blockebene
• Inline-Elemente

Wenn Sie den Unterschied zwischen Inline und Block kennen, ist es viel einfacher, die für Ihr Problem geeignete Zentrierlösung zu finden.

Grid & Flexbox: Der moderne Weg

Grid und Flexbox sind die beiden Layoutmodule, die im modernen Webdesign verwendet werden. Während Flexbox ein eindimensionales Layoutsystem ist, basiert Grid auf einem zweidimensionalen Ansatz.

Und das Zentrieren eines div für beide Layouts kann mit nur zwei Codezeilen erfolgen.

Vertikal & Horizontal: Eine universelle Lösung

Sowohl für Grid- als auch für Flexbox-Layouts können Sie den place-content: center; Eigentum.

CSS und HTML

 .center-div-grid-layout { display: grid; /* display: flex; */ place-content: center; } <div class="center-div-grid-layout">It's that easy.</div>

Die Eigenschaft place-content ist eine Abkürzung für align-content & justify-content .

Mit place-content können Sie je nach Stil eines Layouts, mit dem Sie arbeiten, eine Vielzahl von Platzierungsvariationen vornehmen:

Eine vollständige Referenz finden Sie auf dieser MDN-Seite.

Insgesamt gibt es eine sehr kleine Anzahl von Grenzfällen, in denen die skizzierten Zentriertechniken nicht ausreichen würden. Wenn Sie mit einem alten Layout arbeiten, ist es am besten, Inkonsistenzen in Klassennamen innerhalb des Stylesheets selbst zu finden. Finden Sie dann einen Weg, die Elemente richtig zu verschachteln, damit die angegebene Zentrierlogik richtig ausgeführt wird.

Absolute Zentrierung: transformieren

Die transform wird verwendet, wenn Sie möchten, dass etwas „tot in der Mitte“ zentriert wird – horizontal und vertikal (links, rechts, oben, unten).

CSS und HTML

 .transform-example-container { height: 150px; position: relative; background: #fff2ea; } .transform-example-container .transform-absolute { width: 300px; text-align: center; background: #efba93; color: #fff; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); margin: 0; padding: 10px 0; position: absolute; } <div class="transform-example-container"> <p class="transform-absolute">Example: CSS transform</p> </div>

Dies funktioniert, indem Sie die Position für das untergeordnete Element, das Sie zentrieren möchten, auf absolut setzen.

Es ist wichtig, dass das übergeordnete Element die relative Position hat, andernfalls verwendet die transform-Eigenschaft das Hauptlayout als übergeordnetes Element.

Wir verwenden oben und links , um die Position relativ zur oberen linken Ecke festzulegen. Danach kann das Element mit translate() in die Mitte gezogen werden.

Margin und Padding sollten auf 0 gesetzt werden, sonst kommt es zu einer Positionsverschiebung.

Und das schließt unser Tutorial/Referenz ab. Wenn Sie das Zentrieren mit CSS meistern möchten, starten Sie Ihren bevorzugten Code-Editor und beginnen Sie, diese Beispiele auf die Probe zu stellen.