In CSS zentrieren

Führen Sie in einer Reihe von Tests fünf Methoden der Zentrierung durch, um herauszufinden, welche am stärksten für Veränderungen zu reagieren ist.

Adam Argyle

CSS zu zentrieren ist eine berüchtigte Herausforderung, voller Witze und Spott. 2020 Preisvergleichsportal ist erwachsen und wir können jetzt ehrlich über diese Witze lachen, nicht nur mit zusammengebissenen Zähnen.

Falls du lieber ein Video hast, findest du hier eine YouTube-Version dieses Beitrags:

Die Herausforderung

Es gibt verschiedene Arten der Zentrierung. von unterschiedlichen Anwendungsfällen, Anzahl der in den Mittelpunkt gebrachten Dinge usw. Um eine Begründung für eine „siegreiche“ Zentrierungstechnik zu demonstrieren, habe ich The Resilience Ringer entwickelt. Dabei handelt es sich um eine Reihe von Belastungstests für jede Strategie, die das Gleichgewicht hält, und du kannst ihre Leistung beobachten. Am Ende erläutere ich die Technik mit der höchsten Punktzahl und die „wertvollste“ Technik. Hoffentlich haben Sie neue Zentrierungstechniken und -lösungen kennengelernt.

Der Widerstandsstark

Der „Resilience Ringer“ spiegelt meine Überzeugung wider, dass eine Zentrierungsstrategie auf internationale Layouts, Darstellungsbereiche mit unterschiedlicher Größe, Textbearbeitungen und dynamische Inhalte ausgerichtet sein sollte. Diese Grundsätze trugen bei der Entwicklung der folgenden Ausfallsicherheitstests für die anhaltenden Zentrierungstechniken bei:

  1. Zusammengedrückt:Die Zentrierung sollte Änderungen der Breite verarbeiten können.
  2. Squashed:Die Zentrierung sollte Höhenunterschiede verarbeiten können.
  3. Duplikat:Die Zentrierung sollte für die Anzahl der Elemente dynamisch sein.
  4. Bearbeiten: Die Zentrierung sollte hinsichtlich Länge und Sprache des Inhalts dynamisch sein
  5. Ablauf: Die Zentrierung sollte unabhängig von der Dokumentrichtung und dem Schreibmodus sein.

Die erfolgreiche Lösung sollte ihre Robustheit demonstrieren, indem Inhalte im Mittelpunkt stehen, während sie zerquetscht, zerquetscht, dupliziert, bearbeitet und in verschiedene Sprachmodi und Richtungen gewechselt werden. Vertrauenswürdige und robuste Plattform, ein sicherer Ort.

Legende

Ich habe einige visuelle Farbhinweise angezeigt, die Ihnen helfen, einige Meta-Informationen im Kontext zu halten:

  • Ein rosa Rahmen zeigt die Inhaberschaft für zentrierte Stile an.
  • Das graue Feld ist der Hintergrund des Containers, in dem die Elemente in der Mitte angezeigt werden sollen.
  • Jedes untergeordnete Element hat eine weiße Hintergrundfarbe, sodass Sie die Auswirkungen des Zentrierungsverfahrens auf die Größen der untergeordneten Boxen (falls vorhanden) sehen können.

Die 5 Teilnehmer

Fünf Techniken zur Zentrierung stehen im Resilience Ringer, nur eine erhält die Resilience Crown 👸.

1. Content-Center

Inhalte mit VisBug bearbeiten und duplizieren
  1. Squish: Sehr gut.
  2. Squash: Super!
  3. Duplikat: Sehr gut!
  4. Bearbeitung: Super!
  5. Flow: Großartig!

Die Prägnanz von display: grid und der Abkürzung place-content ist kaum zu schlagen. Sie ist eine gute Methode, um Elemente, die gelesen werden sollen, in den Mittelpunkt zu stellen.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
Vorteile
  • Inhalte werden auch bei begrenztem Platz und Überlauf zentriert
  • Zentrierungsänderungen und Verwaltung an einem Ort
  • Der Abstand sorgt für gleichmäßigen Abstand zwischen n untergeordneten Elementen.
  • „Raster“ erstellt standardmäßig Zeilen
Nachteile
  • Das breiteste untergeordnete Element (max-content) legt die Breite für den Rest fest. Dies wird im Abschnitt Gentle Flex ausführlicher behandelt.

Ideal für Makrolayouts mit Absätzen und Überschriften, Prototypen oder allgemein lesbaren Elemente.

2. Sanfter Flex

  1. Squish:Super!
  2. Squash:Super!
  3. Duplikat: Sehr gut!
  4. Bearbeitung: Super!
  5. Flow: Sehr gut!

Gentle Flex ist eine Strategie, die ausschließlich auf die Ausrichtung konzentriert. Es ist weich und sanft, da im Gegensatz zu place-content: center die Größe der Kinderverpackungen während der Zentrierung nicht geändert wird. Alle Elemente sollten möglichst vorsichtig gestapelt, zentriert und mittig platziert sein.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
Vorteile
  • Übernimmt nur Ausrichtung, Richtung und Verteilung
  • Änderungen und Wartung an einem Ort
  • Der Abstand sorgt für gleichmäßigen Abstand zwischen n untergeordneten Elementen.
Nachteile
  • Die meisten Codezeilen

Eignet sich sowohl für Makro- als auch für Mikro-Layouts.

3. Autobot

  1. Squish:Sehr gut
  2. Squash:hervorragend
  3. Duplikat: Bußgeld
  4. Bearbeitung: Super
  5. Flow: Sehr gut

Der Container ist auf eine flexible Position ohne Ausrichtungsstile festgelegt, während die direkt untergeordneten Elemente mit automatischen Rändern versehen sind. margin: auto hat etwas Nostalgisches und Schönes, wenn es auf allen Seiten des Elements funktioniert.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
Vorteile
  • Unterhaltsamer Trick
  • Schnell und schmutzig
Nachteile
  • Unpassende Ergebnisse bei Überlauf
  • Bei Layouts kann es zu Layouts kommen, wenn Kinder Seiten berühren.
  • Es erscheint nicht optimal und kann zu einer Änderung der Box-Größe des Unterelements führen,

Sehr gut geeignet, um Symbole oder Pseudoelemente zu zentrieren.

4. Logo: Fluffy Center

  1. Squish:Schlecht
  2. Squash:Schlecht
  3. Duplikat:fehlerhaft
  4. Bearbeitung: Super!
  5. Flow: Sehr gut! (sofern Sie logische Eigenschaften verwenden)

Die Mitspieler „fluffy Center“ ist unser bei Weitem am besten klingender Kandidat und die einzige Center-Technik, die ausschließlich auf Elemente und Kinder basiert. Sieh dir unseren inneren rosa Rahmen im Solo an!?

.fluffy-center {
  padding: 10ch;
}
Vorteile
  • Schützt Inhalte
  • Atomkatastrophe
  • In jedem Test steckt heimlich diese Strategie für die Ausrichtung
  • Wortraum ist Lücke
Nachteile
  • Illusion, nicht nützlich zu sein
  • Natürlich gibt es einen Konflikt zwischen Container und Elementen, da diese sehr feste Größe haben.

Ideal für Wort- oder Wortgruppenzentrierung, Tags, Pillen, Schaltflächen, Chips und mehr.

5. Pop & Plop

  1. Squish:okay
  2. Squash:okay
  3. Duplikat:fehlerhaft
  4. Bearbeiten: gut
  5. Ablauf: fein

Dieses „explodiert“, da das Element durch die absolute Positionierung aus dem normalen Ablauf gerissen wird. Der „Plot“-Teil der Namen kommt von dem Punkt, wenn ich ihn am nützlichsten finde: Es handelt sich dabei um eine klassische und praktische Zentrierungstechnik für Overlays, die flexibel und dynamisch an die Inhaltsgröße angepasst wird. Manchmal muss eine UI einfach über eine andere UI gelegt werden.

Vorteile
  • Hilfreich
  • Zuverlässig
  • Wenn Sie sie brauchen, sind sie von unschätzbarem Wert.
Nachteile
  • Code mit negativen Prozentwerten
  • Erfordert position: relative, um einen beinhaltenden Block zu erzwingen
  • Frühe und ungünstige Zeilenumbrüche
  • Ohne zusätzlichen Aufwand kann nur eine pro enthaltendem Block vorhanden sein.

Ideal für Modales-, Toast- und Mitteilungen, Stacks, Tiefeneffekte und Pop-over.

Gewinner

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

[Trommelwirbel]

Sanfter 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 Mikro-Layouts nützlich ist. Es ist eine rundum zuverlässige Lösung mit Ergebnissen, die meinen Erwartungen entsprechen. Da ich ein unverzichtbarer Größen-Junkie bin, gewöhne ich mich auch eher an diese Lösung. Richtig, es ist eine Menge Text, 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 übersehen kann. Trotzdem ist es ein fester Bestandteil meiner Strategien. Sie ist so atomar, dass ich manchmal vergesse, dass ich sie verwende.

Fazit

Welche Aspekte beeinträchtigen deine Strategie? Welche anderen Herausforderungen könnten weitere Herausforderungen Ich habe eine Übersetzung und einen automatischen Höhen-Switch am Container in Betracht gezogen...

Jetzt, wo du weißt, wie ich es gemacht habe, wie würdest du es tun?! Diversifizieren wir unsere Ansätze und lernen alle Möglichkeiten kennen, im Web zu bauen. Folgen Sie dem Codelab in diesem Beitrag, um Ihr eigenes Beispiel zu erstellen. Twittere deine Version und füge sie unten zum Abschnitt Community-Remixe hinzu.

Community-Remixe