In CSS zentrieren

Sehen Sie sich fünf Zentrierungstechniken an, die einer Reihe von Tests unterzogen werden, um herauszufinden, welche am widerstandsfähigsten gegenüber Veränderungen ist.

Adam Argyle

Das Zentrieren in CSS ist eine bekannte Herausforderung, die oft Anlass zu Witzen und Spott gibt. 2020 CSS ist erwachsen geworden und wir können jetzt ehrlich über diese Witze lachen, nicht mit zusammengebissenen Zähnen.

Wenn Sie lieber ein Video ansehen möchten, finden Sie hier eine YouTube-Version dieses Beitrags:

Die Herausforderung

Es gibt verschiedene Arten der Zentrierung. Das kann an unterschiedlichen Anwendungsfällen, der Anzahl der zu zentrierenden Elemente usw. liegen. Um die Begründung für eine „gewinnende“ Zentrierungstechnik zu demonstrieren, habe ich den Resilience Ringer erstellt. Es handelt sich um eine Reihe von Stresstests für jede Zentrierungsstrategie, um sie auszugleichen und ihre Leistung zu beobachten. Am Ende verrate ich die Technik mit der höchsten Punktzahl und die „wertvollste“. Wir hoffen, dass Sie neue Techniken und Lösungen für die Zentrierung kennenlernen.

Der Resilienz-Wecker

Der Resilience Ringer ist eine Darstellung meiner Überzeugung, dass eine Zentrierungsstrategie auf internationale Layouts, Darstellungsbereiche mit variabler Größe, Textbearbeitungen und dynamische Inhalte reagieren sollte. Diese Grundsätze haben die folgenden Resilienztests für die Zentrierungstechniken beeinflusst:

  1. Gequetscht:Die Zentrierung sollte Änderungen an der Breite berücksichtigen können.
  2. Gequetscht:Die Zentrierung sollte Änderungen an der Höhe berücksichtigen können.
  3. Duplizieren:Die Zentrierung sollte dynamisch an die Anzahl der Elemente angepasst werden.
  4. Bearbeiten:Die Zentrierung sollte dynamisch an die Länge und Sprache des Inhalts angepasst werden.
  5. Flow:Die Zentrierung sollte unabhängig von der Dokumentrichtung und dem Schreibmodus sein.

Die Gewinnerlösung sollte ihre Robustheit unter Beweis stellen, indem sie Inhalte zentriert hält, während sie gequetscht, zusammengedrückt, dupliziert, bearbeitet und in verschiedene Sprachmodi und Richtungen verschoben werden. Ein vertrauenswürdiges und stabiles Zentrum, ein sicheres Zentrum.

Legende

Ich habe einige visuelle Farbhinweise eingefügt, damit Sie einige Metainformationen im Kontext behalten können:

  • Ein rosa Rahmen weist darauf hin, dass die Zentrierungsstile Ihnen gehören.
  • Der graue Rahmen ist der Hintergrund des Containers, in dem die Elemente zentriert werden sollen.
  • Jedes untergeordnete Element hat eine weiße Hintergrundfarbe, damit Sie sehen können, welche Auswirkungen die Zentrierungstechnik auf die Größe der untergeordneten Felder hat (falls überhaupt).

Die 5 Kandidaten

Fünf Zentrierungstechniken kommen in den Resilience Ringer, aber nur eine erhält die Resilience Crown 👸.

1. Content Center

Inhalte mit VisBug bearbeiten und duplizieren
  1. Zerquetschen: Super!
  2. Squash: Super!
  3. Duplizieren: Super!
  4. Bearbeiten: Super!
  5. Flow: Sehr gut!

Die Kürze von display: grid und die Kurzschreibweise place-content sind schwer zu übertreffen. Da die Elemente für Kinder kollektiv zentriert und ausgerichtet werden, ist dies eine solide Zentrierungstechnik für Gruppen von Elementen, die gelesen werden sollen.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
Vorteile
  • Inhalte werden auch bei wenig Platz und Überlauf zentriert.
  • Zentrale Bearbeitung und Wartung
  • Der Abstand garantiert einen gleichen Abstand zwischen n untergeordneten Elementen.
  • Mit „Grid“ werden standardmäßig Zeilen erstellt
Nachteile
  • Das breiteste untergeordnete Element (max-content) legt die Breite für alle anderen Elemente fest. Das wird im Abschnitt Gentle Flex genauer erläutert.

Ideal für Makrolayouts mit Absätzen und Überschriften, Prototypen oder allgemein für Elemente, die lesbar zentriert werden müssen.

2. Gentle Flex

  1. Zerquetschen:Sehr gut!
  2. Squash:Sehr gut!
  3. Duplizieren:Super!
  4. Bearbeiten:Super!
  5. Flow:Super!

Gentle Flex ist eine Strategie, die nur auf der Zentrierung basiert. Es ist weich und sanft, da im Gegensatz zu place-content: center keine Größen von Kinderboxen während der Zentrierung geändert werden. Alle Elemente werden so schonend wie möglich gestapelt, zentriert und mit Abstand angeordnet.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
Vorteile
  • Übernimmt nur Ausrichtung, Richtung und Verteilung
  • Bearbeitungen und Wartung an einem Ort
  • Der Abstand garantiert einen gleichen Abstand zwischen n untergeordneten Elementen.
Nachteile
  • Die meisten Codezeilen

Ideal für Makro- und Mikrolayouts.

3. Autobot

  1. Squish:Sehr gut
  2. Squash:Sehr gut
  3. Duplikat:in Ordnung
  4. Bearbeiten:Sehr gut
  5. Flow:sehr gut

Der Container ist auf „flex“ festgelegt und hat keine Ausrichtungsstile, während die direkten untergeordneten Elemente mit automatischen Rändern formatiert sind. Es hat etwas Nostalgisches und Wunderbares, margin: auto von allen Seiten zu bearbeiten.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
Vorteile
  • Unterhaltsamer Trick
  • Schnell und schmutzig
Nachteile
  • Ungünstige Ergebnisse bei Überlauf
  • Da die Verteilung und nicht der Abstand berücksichtigt wird, können Layouts mit untergeordneten Elementen entstehen, die sich an den Seiten berühren.
  • Wenn das Kind in die richtige Position „geschoben“ wird, ist das nicht optimal und kann zu einer Änderung der Größe des Rechtecks führen.

Ideal zum Zentrieren von Symbolen oder Pseudoelementen

4. Fluffy Center

  1. Zerquetschen:schlecht
  2. Squash:schlecht
  3. Duplikat:Schlecht
  4. Bearbeiten:Super!
  5. Flow:Super! (sofern Sie logische Eigenschaften verwenden)

Der Kandidat „fluffy center“ klingt mit Abstand am leckersten und ist die einzige Zentrierungstechnik, die vollständig dem Element/Kind gehört. Seht ihr den inneren rosa Rahmen?

.fluffy-center {
  padding: 10ch;
}
Vorteile
  • Inhalte schützen
  • Atomkatastrophe
  • Jeder Test enthält diese Zentrierungsstrategie im Hintergrund.
  • Wortzwischenraum ist Lücke
Nachteile
  • Illusion, nicht nützlich zu sein
  • Es gibt einen Konflikt zwischen dem Container und den Elementen, da beide sehr genau auf ihre Größe achten.

Ideal für die zentrierte Darstellung von Wörtern oder Wortgruppen, Tags, Pillen, Schaltflächen, Chips und mehr.

5. Pop & Plop

  1. Zerquetschen:in Ordnung
  2. Squash:in Ordnung
  3. Duplikat:Schlecht
  4. Bearbeiten:in Ordnung
  5. Flow:gut

Das Element wird „herausgeholt“, weil es absolut positioniert ist und dadurch nicht mehr im normalen Fluss enthalten ist. Der Begriff „plop“ im Namen kommt daher, dass ich es am nützlichsten finde, wenn ich es auf andere Dinge „ploppe“. Es ist eine klassische und praktische Overlay-Zentrierungstechnik, die flexibel und dynamisch an die Inhaltsgröße angepasst werden kann. Manchmal müssen Sie nur eine Benutzeroberfläche über eine andere legen.

Vorteile
  • Hilfreich
  • Zuverlässig
  • Unschätzbar wertvoll, wenn Sie es brauchen
Nachteile
  • Code mit negativen Prozentwerten
  • Erfordert position: relative, um einen enthaltenden Block zu erzwingen
  • Frühe und unpassende Zeilenumbrüche
  • Pro enthaltendem Block kann ohne zusätzlichen Aufwand nur ein Element vorhanden sein.

Ideal für Modale, Toasts und Nachrichten, Stapel und Tiefeneffekte, Pop-overs.

Der Gewinner

Wenn ich auf einer Insel wäre und nur eine Zentrierungstechnik haben könnte, wäre es…

[Trommelwirbel]

Gentle Flex 🎉

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

Sie finden es immer in meinen Stylesheets, da es sowohl für Makro- als auch für Mikrolayouts nützlich ist. Es ist eine rundum zuverlässige Lösung, deren Ergebnisse meinen Erwartungen entsprechen. Außerdem bin ich ein Fan von intrinsischer Größenanpassung, daher tendiere ich dazu, diese Lösung zu verwenden. Es stimmt, dass es viel zu tippen ist, aber die Vorteile überwiegen den zusätzlichen Code.

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

„Fluffy Center“ ist so klein, dass es leicht als Zentrierungstechnik übersehen wird, aber es ist ein wichtiger Bestandteil meiner Zentrierungsstrategien. Es ist so atomar, dass ich manchmal vergesse, dass ich es benutze.

Fazit

Welche Faktoren können Ihre Zentrierungsstrategien beeinträchtigen? Welche weiteren Herausforderungen könnten dem Resilienz-Wecker hinzugefügt werden? Ich habe über eine Übersetzung und einen automatischen Höhenwechsel für den Container nachgedacht – was noch?

Jetzt, wo du weißt, wie ich es gemacht habe, wie würdest du es machen? Lassen Sie uns unsere Ansätze diversifizieren und alle Möglichkeiten kennenlernen, die das Web bietet. Folgen Sie dem Codelab in diesem Beitrag, um Ihr eigenes Beispiel für die Zentrierung zu erstellen, genau wie die Beispiele in diesem Beitrag. Schreib mir auf Twitter deine Version und ich füge sie unten im Bereich Community-Remixe hinzu.

Community-Remixe