In CSS zentrieren

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

Adam Argyle

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 die Balance innerhalb der einzelnen Strategien zu finden und ihre 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 werden.
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 die Inhalte in der Mitte bleiben, während sie zusammengedrückt, gestaucht, dupliziert, bearbeitet und in verschiedene Sprachmodi und Richtungen umgewandelt werden. 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 Resilienzkrone 👸.

1. Content Center

1. Squish: Super!
2. Squash: Super!
3. Duplizieren: Super!
4. Bearbeiten: Super!
5. Ablauf: Sehr gut!

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;
}

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;
}

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;
}

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;
}

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 auf die Größe der Inhalte reagiert. Manchmal müssen Sie einfach nur eine Benutzeroberfläche über eine andere legen.

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 meine Erwartungen erfüllen. Außerdem bin ich ein Fan der intuitiven 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 Herangehensweise diversifizieren und alle Möglichkeiten kennenlernen, wie man im Web entwickeln kann. 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 Community-Remixe ein.

Remixe der Community

• CSS-Tipps mit einem Blogpost