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 Änderungen ist.

Adam Argyle

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

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

Die Herausforderung

Es gibt verschiedene Arten der Zentrierung. Unterschiedliche Anwendungsfälle, Anzahl der zu zentrierenden Elemente usw. Um die Gründe 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 die Leistung zu beobachten. Am Ende verrate ich die Technik mit der höchsten Punktzahl und die „wertvollste“ Technik. Hoffentlich haben Sie neue Techniken und Lösungen für die Zentrierung kennengelernt.

Resilienz-Ringer

Der Resilience Ringer ist eine Darstellung meiner Überzeugung, dass eine Zentrierungsstrategie gegenüber internationalen Layouts, Darstellungsbereichen mit variabler Größe, Textbearbeitungen und dynamischen Inhalten widerstandsfähig sein sollte. Diese Grundsätze haben dazu beigetragen, die folgenden Resilienztests für die Zentrierungstechniken zu entwickeln:

1. Zusammengequetscht: Die Zentrierung sollte Änderungen der Breite verarbeiten können.
2. Squashed: centering should be able to handle changes to height
3. Duplikat: 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 in der Mitte hält, während sie gequetscht, gestaucht, dupliziert, bearbeitet und in verschiedene Sprachmodi und -richtungen umgeschaltet wird. Ein vertrauenswürdiges und widerstandsfähiges Zentrum, ein sicheres Zentrum.

Legend

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

• Ein rosa Rahmen zeigt an, dass die Zentrierungsstile zu diesem Element gehören.
• Das graue Feld ist der Hintergrund des Containers, in dem die Elemente zentriert werden sollen.
• Jedes untergeordnete Element hat einen weißen Hintergrund, sodass Sie die Auswirkungen der Zentrierungstechnik auf die Größe der untergeordneten Boxen sehen können (falls vorhanden).

Die 5 Kandidaten

5 Zentrierungstechniken treten im Resilienz-Ring gegeneinander an, aber nur eine wird die Resilienz-Krone 👸 erhalten.

1. Content Center

Inhalte mit VisBug bearbeiten und duplizieren

1. Squish: Großartig!
2. Squash: Super!
3. Duplizieren: Super!
4. Bearbeiten: Super!
5. Flow: großartig!

Es wird schwierig sein, die Prägnanz von display: grid und die Kurzschreibweise place-content zu übertreffen. Da die untergeordneten Elemente gemeinsam zentriert und im Blocksatz ausgerichtet werden, ist dies eine gute Zentrierungstechnik für Gruppen von Elementen, die gelesen werden sollen.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

Vorteile

• Inhalte werden auch bei beengtem Platz und Überlauf zentriert.
• Bearbeitungen und Wartung an einem Ort
• „Gap“ sorgt für einen gleichmäßigen Abstand zwischen n untergeordneten Elementen.
• Im Raster werden standardmäßig Zeilen erstellt

Nachteile

• Das breiteste untergeordnete Element (max-content) legt die Breite für alle anderen fest. Darauf gehen wir im Abschnitt Gentle Flex näher ein.

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

Hinweis: place-content ist nicht auf display: grid beschränkt. display: flex kann auch von den Kurzschreibweisen place-content und place-item profitieren.

2. Sanfte Flexibilität

1. Squish: Super!
2. Squash: Super!
3. Duplikat: Super!
4. Bearbeiten: Super!
5. Flow: Großartig!

Gentle Flex ist eine Strategie, die sich nur auf die Zentrierung konzentriert. Sie ist weich und sanft, da im Gegensatz zu place-content: center während der Zentrierung keine Größen von untergeordneten Boxen geändert werden. Alle Artikel werden so vorsichtig wie möglich gestapelt, zentriert und mit Abstand platziert.

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

Vorteile

• Übernimmt nur Ausrichtung, Richtung und Verteilung
• Bearbeitung und Wartung an einem Ort
• „Gap“ sorgt für einen gleichmäßigen Abstand zwischen n untergeordneten Elementen.

Nachteile

• Die meisten Codezeilen

Ideal für Makro- und Mikrolayouts.

Schlüsselbegriff: Makro-Layouts sind wie Bundesländer oder Gebiete eines Landes: sehr allgemeine, große Abdeckungszonen. Die durch Makro-Layouts erstellten Zonen enthalten in der Regel mehr Layouts. Je weniger Fläche das Layout abdeckt, desto weniger ist es ein Makro-Layout. Wenn ein Layout weniger Fläche abdeckt oder weniger Layouts enthält, wird es eher zu einem Mikrolayout.

3. Autobot

1. Squish: Großartig
2. Squash: Großartig
3. Duplikat: Bußgeld
4. Bearbeiten: Großartig
5. Flow: großartig

Der Container ist auf „flex“ ohne Ausrichtungsstile festgelegt, während die direkten untergeordneten Elemente mit automatischen Rändern formatiert sind. Es hat etwas Nostalgisches und Wunderbares, margin: autovon allen Seiten an einem Element zu arbeiten.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

Vorteile

• Lustiger Trick
• Quick and dirty

Nachteile

• Unpassende Ergebnisse bei Überlauf
• Wenn Sie sich auf die Verteilung statt auf die Lücke verlassen, kann es vorkommen, dass sich die Seiten der untergeordneten Elemente berühren.
• In eine Position „geschoben“ zu werden, ist nicht optimal und kann dazu führen, dass sich die Größe des untergeordneten Elements ändert.

Ideal zum Zentrieren von Symbolen oder Pseudoelementen.

4. Fluffy Center

1. Squish: schlecht
2. Squash: schlecht
3. Duplikat: schlecht
4. Bearbeiten: Super!
5. Flow: Großartig! (sofern Sie logische Properties verwenden)

Der Kandidat „fluffy center“ ist bei Weitem der am leckersten klingende Kandidat und die einzige Zentrierungstechnik, die vollständig vom Element/untergeordneten Element gesteuert wird. Sehen Sie den einzelnen inneren rosa Rand?

.fluffy-center {
  padding: 10ch;
}

Vorteile

• Schützt Inhalte
• Atomkatastrophe
• Jeder Test enthält insgeheim diese Zentrierungsstrategie,
• Wortabstand ist Lücke

Nachteile

• Illusion, nicht nützlich zu sein
• Es gibt einen Konflikt zwischen dem Container und den Elementen, da beide sehr strikt in Bezug auf ihre Größe sind.

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

5. Pop & Plop

1. Squish: Okay.
2. Squash: Okay
3. Duplikat: schlecht
4. Bearbeiten: Fein
5. Flow: gut

Das Element wird „herausgehoben“, weil es durch die absolute Positionierung aus dem normalen Fluss herausgenommen wird. Der „Plop“-Teil des Namens kommt daher, dass ich es am nützlichsten finde, es auf andere Dinge zu „ploppen“. Das ist eine klassische und praktische Technik zum Zentrieren von Overlays, die flexibel und dynamisch auf die Inhaltsgröße reagiert. Manchmal müssen Sie einfach eine Benutzeroberfläche über eine andere legen.

Vorteile

• Hilfreich
• Zuverlässig
• Wenn du sie brauchst, ist sie unbezahlbar

Nachteile

• Code mit negativen Prozentwerten
• Erfordert position: relative, um einen umschließenden Block zu erzwingen
• Frühzeitige und unpassende Zeilenumbrüche
• Es kann nur ein Element pro übergeordnetem Block ohne zusätzlichen Aufwand vorhanden sein.

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

Der Gewinner

Wenn ich auf einer Insel wäre und nur eine Technik zur Zentrierung hätte, 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 mit Ergebnissen, die meinen Erwartungen entsprechen. Da ich ein Fan von intrinsischer Größenanpassung bin, tendiere ich zu dieser Lösung. Es ist zwar viel zu schreiben, aber die Vorteile überwiegen den zusätzlichen Code.

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center ist so klein, dass man es als Zentrierungstechnik leicht übersieht, aber es ist ein fester Bestandteil meiner Zentrierungsstrategien. Es ist so atomar, dass ich manchmal vergesse, dass ich es verwende.

Fazit

Welche Dinge bringen Sie aus dem Gleichgewicht? Welche anderen Herausforderungen könnten dem Resilienz-Ringer hinzugefügt werden? Ich habe die Übersetzung und einen Schalter für die automatische Höhe des Containers in Betracht gezogen… was noch!?

Jetzt, da 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, wie wir im Web entwickeln können. Folgen Sie dem Codelab zu diesem Beitrag, um Ihr eigenes Zentrierungsbeispiel zu erstellen, genau wie die in diesem Beitrag. Tweeten Sie mir Ihre Version und ich füge sie unten im Abschnitt Community-Remixe hinzu.

Community-Remixe

• CSS-Tricks mit einem Blogpost