In CSS zentrieren

Fünf Zentrierungstechniken werden in einer Reihe von Tests getestet, um herauszufinden, welche am besten gegen Veränderungen gewappnet ist.

Das Zentrieren in CSS ist eine berüchtigte Herausforderung, die mit Witzen und Spott verbunden ist. 2020 ist CSS erwachsen geworden und wir können über diese Witze jetzt ehrlich lachen, nicht mehr nur mit zusammengekniffenen Zähnen.

Wenn du lieber ein Video ansiehst, findest du hier eine YouTube-Version dieses Beitrags:

Die Herausforderung

Es gibt verschiedene Arten der Zentrierung. Es gibt verschiedene Anwendungsfälle, verschiedene Dinge, die zentriert werden müssen usw. Um die Begründung für eine „erfolgreiche“ Zentrierungstechnik zu veranschaulichen, habe ich The Resilience Ringer entwickelt. Es handelt sich um eine Reihe von Stresstests für jede Zentrierstrategie, um das Gleichgewicht zu finden und die Leistung zu beobachten. Am Ende enthülle ich die Technik mit der höchsten Punktzahl sowie die „wertvollste“. Hoffentlich haben Sie neue Techniken und Lösungen für die Bildausrichtung kennengelernt.

Der Resilienz-Wecker

Der Resilienz-Ring steht für meine Überzeugung, dass eine Zentrierstrategie für internationale Layouts, Darstellungsbereiche mit variabler Größe, Textänderungen und dynamische Inhalte geeignet sein sollte. Diese Grundsätze haben dazu beigetragen, die folgenden Resilienztests für die Zentrierungstechniken zu entwickeln:

  1. Zusammengedrückt:Die Zentrierung sollte Änderungen der Breite verkraften können.
  2. Zusammengedrückt:Die Zentrierung sollte Änderungen der Höhe verkraften können.
  3. Duplizieren:Die Zentrierung sollte dynamisch an die Anzahl der Elemente angepasst werden.
  4. Bearbeiten:Mittelzentrierung sollte dynamisch an die Länge und Sprache der Inhalte angepasst sein.
  5. Fluss: Die Zentrierung sollte unabhängig von der Dokumentausrichtung und dem Schreibmodus sein.

Die Gewinnerlösung sollte ihre Widerstandsfähigkeit unter Beweis stellen, indem sie die Inhalte in der Mitte hält, während sie zusammengedrückt, gestaucht, dupliziert, bearbeitet und in verschiedene Sprachmodi und Richtungen umgewandelt wird. Ein vertrauenswürdiges und resilientes Zentrum, ein sicheres Zentrum.

Legende

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

  • Ein rosa Rahmen gibt an, dass die Ausrichtungsstile dem Nutzer gehören.
  • Das graue Feld ist der Hintergrund des Containers, in dem die Elemente zentriert sein sollen.
  • Jedes untergeordnete Element hat eine weiße Hintergrundfarbe, damit Sie die Auswirkungen der Zentrierung auf die Größe der untergeordneten Felder sehen können (falls vorhanden).

Die 5 Teilnehmer

Fünf Zentrierungstechniken treten in den Ring, nur eine erhält die Krone der Resilienz 👸.

1. Content Center

Inhalte mit VisBug bearbeiten und duplizieren
  1. Squish: Super!
  2. Squash: Super!
  3. Duplizieren: Super!
  4. Bearbeiten: Super!
  5. Ablauf: Super!

Die Ausdrucksweise von display: grid und die Kurzschreibweise von place-content sind schwer zu übertreffen. Da damit untergeordnete Elemente gemeinsam zentriert und ausgerichtet werden, ist es eine gute Methode zum Zentrieren von Elementgruppen, die gelesen werden sollen.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
Vorteile
  • Der Inhalt ist auch bei begrenztem Platz und Überlauf zentriert
  • Zentrierung, Bearbeitungen und Wartung an einem Ort
  • Mit „Gap“ wird ein gleichmäßiger Abstand zwischen n untergeordneten Elementen garantiert.
  • Mit Rastern werden standardmäßig Zeilen erstellt
Nachteile
  • Das breiteste untergeordnete Element (max-content) legt die Breite für alle anderen fest. Weitere Informationen dazu finden Sie unter Sanftes Dehnen.

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

2. Sanftes Flexen

  1. Squish:Super!
  2. Squash:Super!
  3. Duplikat:Super!
  4. Bearbeiten:Super!
  5. Ablauf:sehr gut

„Sanftes Flexen“ ist eine Strategie, bei der nur das Zentrieren im Vordergrund steht. Die Animation ist sanft und dezent, da im Gegensatz zu place-content: center die Größe der Kinderfelder während der Zentrierung nicht geändert wird. Alle Elemente werden so schonend wie möglich gestapelt, zentriert und platziert.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
Vorteile
  • Nur Ausrichtung, Richtung und Verteilung
  • Änderungen und Wartung an einem Ort
  • Mit „Gap“ wird ein gleichmäßiger Abstand zwischen n untergeordneten Elementen garantiert.
Nachteile
  • Die meisten Codezeilen

Gut geeignet für Makro- und Mikrolayouts.

3. Autobot

  1. Squish:sehr gut
  2. Squash:sehr gut
  3. Duplikat:in Ordnung
  4. Bearbeiten:super
  5. Ablauf: sehr gut

Der Container ist auf „flex“ ohne Ausrichtungsstile gesetzt, während die direkten untergeordneten Elemente mit automatischen Rändern formatiert sind. Es ist etwas Nostalgisches und Wunderbares daran, margin: auto an allen Seiten des Elements zu arbeiten.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
Vorteile
  • Lustiger Trick
  • Schnell und einfach
Nachteile
  • Ungünstige Ergebnisse bei Überlauf
  • Wenn Sie sich auf die Verteilung statt auf die Lücke verlassen, kann es zu Layouts kommen, bei denen die Kinder die Ränder berühren.
  • Das „Zu-Position-Schieben“ ist nicht optimal und kann zu einer Änderung der Größe des untergeordneten Elements führen.

Ideal für das Zentrieren von Symbolen oder Pseudoelementen.

4. Fluffy Center

  1. Squish:schlecht
  2. Squash:schlecht
  3. Duplikat:schlecht
  4. Bearbeiten:Super!
  5. Ablauf:sehr gut (sofern Sie logische Properties verwenden)

Der Kandidat „fluffy center“ ist bei weitem der am besten klingende Kandidat und die einzige Zentriertechnik, die vollständig dem Element/Kind zugewiesen ist. Sehen Sie sich unseren rosafarbenen inneren Rahmen an?

.fluffy-center {
  padding: 10ch;
}
Vorteile
  • Inhalte schützen
  • Atomkatastrophe
  • Jeder Test enthält heimlich diese Zentrierstrategie.
  • Wortabstand ist Lücke
Nachteile
  • Der Anschein, nicht nützlich zu sein
  • Es gibt einen Konflikt zwischen dem Container und den Artikeln, da beide sehr genau in ihrer Größe sind.

Besonders geeignet für die zentrierte Ausrichtung von Wörtern oder Wortgruppen, Tags, Tabletten, Schaltflächen, Chips und mehr.

5. Pop & Plop

  1. Squish:Okay.
  2. Squash:in Ordnung
  3. Duplikat:schlecht
  4. Bearbeiten:in Ordnung
  5. Ablauf: in Ordnung

Das Element sticht hervor, weil es durch die absolute Positionierung aus dem normalen Fluss herausragt. Der Teil „Plop“ in den Namen stammt von der Verwendung, die ich am nützlichsten finde: Ich platziere sie einfach auf anderen Dingen. Das ist eine klassische und praktische Methode, Overlays zu zentrieren, die flexibel und dynamisch an die Größe der Inhalte angepasst werden kann. Manchmal müssen Sie einfach nur eine Benutzeroberfläche auf eine andere legen.

Vorteile
  • Hilfreich
  • Zuverlässig
  • Wenn Sie es brauchen, ist es unschätzbar.
Nachteile
  • Code mit negativen Prozentwerten
  • Erfordert position: relative, um einen enthaltenden Block zu erzwingen
  • Frühe und unpassende Zeilenumbrüche
  • Pro enthaltendem Block kann es nur einen geben, ohne dass zusätzlicher Aufwand entsteht.

Gut geeignet für Modals, Toasts und Nachrichten, Stapel und Tiefeneffekte, Pop-ups.

Der Gewinner

Wenn ich auf einer einsamen Insel wäre und nur eine Zentrierungstechnik zur Verfügung hätte, wäre das…

[Trommelwirbel]

Gentle Flex 🎉

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

Sie finden sie immer in meinen Stylesheets, da sie sowohl für Makro- als auch für Mikrolayouts nützlich ist. Es ist eine zuverlässige Lösung mit Ergebnissen, die meinen Erwartungen entsprechen. Außerdem bin ich ein Fan von inhärenter Größenbestimmung und tendiere dazu, diese Lösung zu verwenden. Es ist zwar viel Text, aber die Vorteile überwiegen den zusätzlichen Code.

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

„Fluffy Center“ ist so mikroskopisch, dass es als Zentrierungstechnik leicht übersehen wird. Es ist jedoch ein fester Bestandteil meiner Zentrierungsstrategien. Es ist so atomar, dass ich manchmal vergesse, dass ich es verwende.

Fazit

Was stört Ihre Zentrierungsstrategien? Welche weiteren Herausforderungen könnten dem Resilienz-Wecker hinzugefügt werden? Ich habe über eine Übersetzung und eine automatische Höhe für den Container nachgedacht… was sonst noch?

Jetzt, da Sie wissen, wie ich das gemacht habe, wie würden Sie es machen? Lassen Sie uns unsere Ansätze diversifizieren und alle Möglichkeiten kennenlernen, wie Sie im Web entwickeln können. Folgen Sie dem Codelab in diesem Beitrag, um ein eigenes Beispiel für die Zentrierung zu erstellen, ähnlich wie in diesem Beitrag. Tweete mir deine Version und ich füge sie unten in den Abschnitt Remixe der Community ein.

Remixe der Community