Zentrieren mit CSS

Es kann doch nicht so schwer sein. Es gibt Dinge beim Webentwickeln die sind einfach wenn man weiss wie. 😉 Deshalb gibt es die Tricks Rubrik auf meiner Seite. Das sind Dinge die ich hier nochmals aufschreibe, dass ich sie mir merke und ihr gleich davon profitieren könnt.

Eigenschaften von Zentrieren

Genug gequasselt wie kann man mit CSS im Jahr 2021 zentrieren? Natürlich gibt es verschiedene Methoden, um in CSS zu zentrieren. Lasst uns also kurz überlegen was für Veränderungseigenschaften und Fähigkeit unsere Zentriermethodik erfüllen muss. Anhand dieser Eigenschaften haben wir dann gleich die Kriterien die Methoden zu bewerten.

• Veränderung Höhe
• Veränderung Breite
• Veränderung Anzahl Elemente
• Veränderung des Inhalts

Das das Element exakt in der Mitte ist soll bei allen ausgewählten Methoden geben sein.

Margin Auto

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

Prüfung:

• Veränderung Höhe: Sehr gut
• Veränderung Breite: Sehr gut
• Veränderung Anzahl Elemente: Genügend
• Veränderung des Inhalts: Sehr gut

Als ich das erste Mal in einer Webseite (damals noch mit Dreamviewer) etwas zentrieren durfte, lernte ich diese Zentriermethodik kennen. Intuitiv verwende ich diese bis heute immer. Auch wenn sie einige Nachteile mit sich bringt.

Nachteile
Mehrere Elemente werden nebeneinander angeordnet. Das kann gewünscht sein führt aber bei einem Overflow zu unangenehmen Ergebnissen. Es kann sein, dass sich die Boxgrösse des Kindes verändert.

Grid Content-Center

.container{
  display: grid;
  place-content: center; 
  gap: 10px;
}

Prüfung:

• Veränderung Höhe: Perfekt
• Veränderung Breite: Perfekt
• Veränderung Anzahl Elemente: Perfekt
• Veränderung des Inhalts: Perfekt

Grid Content-Center sieht nach einer soliden Zentriermethodik aus. Es zentriert alle Child Elemente konsequent.

Nachteile
Schreib mal einen längeren Text in einem Element. Schwups alle anderen Elemente passen sich an dem Element an welches die maximale Breite hat. Kann natürlich auch gewünscht sein.

Flex

.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

Prüfung:

• Veränderung Höhe: Perfekt
• Veränderung Breite: Perfekt
• Veränderung Anzahl Elemente: Perfekt
• Veränderung des Inhalts: Perfekt

Flex stapelt alle Child Objekte und zentriert sie perfekt ohne dabei die Grösse der Child Objekte anpassen zu müssen.

Nachteile
Da muss man schon fast erfinderisch werden, um ein Nachteil zu finden: Flex hat den längsten CSS-Code.

Padding Center

.container {
  padding: 5ch;
}

Prüfung:

• Veränderung Höhe: Ungenügend
• Veränderung Breite: Ungenügend
• Veränderung Anzahl Elemente: Ungenügend
• Veränderung des Inhalts: Perfekt

Die Padding Zentriermethode eignet sich super für Wörter Zentrierung auf zum Beispiel auf Buttons oder tags. Für Zentrierung von Boxen ist es nicht geeignet.

Nachteile
Für Layout-Definitionen ungeeignet. Es gibt zwischen Container und Child Konflikte.

Gewinner

Flex gewinnt. Er schlägt sich in allen Prüfungen perfekt und der Nachteil mit dem Code fällt zu wenig ins Gewicht.

MVP / Gewohnheit

Trotzdem findet ihr immer wieder mal in meinen Stylesheets das margin auto Zentriermethodik. Ich bin einfach zu viel Gewohnheitstier als dass ich dies nicht intuitiv verwenden würde.

Habt ihr auch „schlechte“ Gewohnheiten oder vielleicht sogar noch eine andere Zentriermethodik. Lasst es mich via Kommentar oder E-Mail wissen.

Quellcode JS Fiddle

Den Quellcode findet ihr unter: https://jsfiddle.net/coffeefan/ty596qux/