Heute beschäftigen wir uns mit einem Thema, das nicht nur Anfänger das eine oder andere Mal ins Boxhorn jagt. Auch Fortgeschrittene oder Profis haben immer mal wieder das Problem, dass sie in Situationen kommen, bei denen selbst sie unsicher sind, wie sich ein bestimmtes Element in einem speziellen Anwendungsfall (am besten) zentrieren lässt.
In diesem Artikel möchte ich zum einen die unterschiedlichen Faktoren vorstellen, die beim Zentrieren eine Rolle spielen und beeinflussen, was funktioniert und was nicht. Im nächsten Schritt spielen wir dann verschiedene Szenarien durch und besprechen, wie man diese lösen könnte. Zum Ende werde ich noch ein kurzes Fazit ziehen.
Warum ist das Zentrieren mit CSS so schwer?
Bevor wir tiefer in das Thema einsteigen, möchte ich aber noch kurz eine Frage beantworten, die vermutlich vielen von euch auf dem Herzen liegt: Warum ist das Zentrieren mit CSS so schwer?
Wenn ihr mich fragt, dann ist es prinzipiell gar nicht so schwer. Eigentlich gibt es in CSS deutlich schwierigere Sachen, mit denen sich ein Webentwickler so rumschlagen muss. Der Grund dafür, dass es zahlreichen Leuten so schwer vorkommt, ist eher die Tatsache, dass besonders beim Zentrieren unzählige Wege nach Rom führen. Durch die vielen unterschiedlichen Faktoren, die beim Zentrieren eine Rolle spielen, gibt es keine allgemeine Lösung, sondern nur situationsabhängige. Was das eine Mal funktioniert, kann beim nächsten Mal der komplett falsche Ansatz sein, da es sich z.B. nicht um Text, sondern ein Bild handelt. Und das ist noch ein sehr einfaches Beispiel.
Diese Faktoren müssen beim Zentrieren mit CSS beachtet werden
Welche Faktoren müssen wir also berücksichtigen, wenn wir ein beliebiges Element mit CSS zentrieren wollen?
Die erste Frage, die wir uns stellen müssen, ist logischerweise “Was soll zentriert werden?”. Im Wesentlichen kann es darauf zwei verschiedene Antworten geben:
- Inline-Elemente (z.B. Links) oder Textzeilen (z.B. Text in Paragraphen oder Überschriften)
- Ein Bild oder ein beliebiges Blockelement (z.B. p, div, header usw.)
Der erste Faktor, den es zu berücksichtigen gilt, ist also der Typ des Elements, das zentriert werden soll. Wenn man diese Frage beantwortet hat, fallen schon mal viele Möglichkeiten weg.
Weiter geht es dann mit der Frage “Wie soll das Element zentriert werden?”. Hier gibt es drei Möglichkeiten: Entweder das Element wird horizontal, vertikal oder sogar horizontal und vertikal zentriert. Auch kommt es vor, dass beispielsweise mehrere Elemente gemeinsam ausgerichtet werden sollen. Dieser Faktor kann in einigen Fällen die Schwierigkeit des Zentrierens erhöhen.
Zuletzt besteht noch die Frage “Welche Maße sind bekannt?”. Dabei geht es vor allen Dingen darum, ob die Breite und/oder Höhe des (Eltern)elements bekannt ist. Dies spielt besonders seit der Entwicklung zum responsiven Webdesign eine große Rolle, da es häufig vorkommt, dass die Breite oder Höhe nicht bekannt ist, was den Schwierigkeitsgrad in manchen Fällen ebenfalls deutlich erhöht.
Nachdem wir die verschiedenen Faktoren kurz angerissen haben, können wir uns nun daran orientieren. Wer die Zusammenhänge der besprochenen Faktoren beim Zentrieren noch nicht ganz verstanden hat, wird nun, wenn es an die konkreten Beispiele geht, noch schlauer werden. Also keine Angst. Vieles ergibt sich von selbst.
Inline-Elemente oder Textzeilen zentrieren
Auf geht’s! Wir beginnen mit der banalsten Form des Zentrierens: Die Zentrierung von Inline-Elementen oder Textzeilen, wie z.B. Text in Paragraphen oder Überschriften.
Horizontale Zentrierung
Zuerst zentrieren wir Text in einem Paragraphen horizontal. Um dies
zu erreichen, greifen wir auf die CSS-Eigenschaft
text-align zurück und setzen diese auf
center. Mehr benötigen wir nicht.
p {
text-align: center;
}
Wichtig anzumerken ist hierbei, dass sich das “Elternelement”
(p) des Textes selber nicht zentriert und die Höhe oder
Breite des Elements völlig unrelevant ist. Wenn wir zusätzlich noch
einen Rahmen vergeben und die Breite beispielsweise auf 400px
einstellen, wird dies eindeutig sichtbar.
p {
text-align: center;
width: 400px;
border: 1px solid green;
}
Dieses Verhalten ändert sich bei Inline-Elementen. Dort können wir
nämlich ebenfalls mit text-align eine Zentrierung
erreichen, nur in dem Fall von dem ganzen Element.
Spontan würde sich da z.B. ein Link anbieten. Wieder nutze ich zur Veranschaulichung einen Rahmen und ihr werdet einen deutlichen Unterschied feststellen:
div {
text-align: center;
}
a {
border: 1px solid green;
}
Wichtig: Da wir keinen Text, sondern das Inline-Element zentrieren möchten, müssen wir natürlich dem übergeordneten Element die Eigenschaft zuweisen, nicht dem Inline-Element.
Am besten kann man sich diesen Unterschied mit der Vorstellung
merken, dass Text selber auch ein Element ist und wir immer dem
Elternelement die entsprechende Eigenschaft zur Zentrierung mitgeben
müssen. Beim Link ist also der div-Container ganz klar
das Elternelement, das die Eigenschaft bekommt. Beim Text ist es der
Paragraph, also das p-Element, welches das
Elternelement ist, schließlich befindet sich der Text innerhalb des
Paragraphen.
Vertikale Zentrierung
Soweit, so gut. Aber wie kann man Text oder Inline-Elemente innerhalb eines Containers vertikal zentrieren?
Hier kommt das erste Mal die Frage nach den Maßen des Containers auf den Tisch. Die Breite des Containers ist erstmal egal, aber was ist mit der Höhe? Diese ist hingegen schon relevant.
Angenommen wir haben einen Container, der 100px hoch ist:
Die Lösung wäre da die Eigenschaft line-height. Mit dieser kann man
die Zeilenhöhe des Textes festlegen und, weil der Text innerhalb der
Zeile immer vertikal zentriert dargestellt wird, müssen wir die
line-height nur an die Größe des Containers anpassen:
div {
background-color: lightgreen;
height: 100px;
}
p {
line-height: 100px;
}
Das Gleiche funktioniert genauso mit Inline-Elementen, allerdings wird dabei nicht die Höhe des Elements beeinflusst, was bei einem Blockelement hingegen schon passiert.
Das große Problem bei der line-height-Methode ist, wenn
wir eine prozentuale Höhe beim Container haben. Wenn der Container
nämlich z.B. die Höhe 10% hat und wir dann versuchen, die
line-height ebenfalls daran anzupassen, bekommen wir
nicht das gewünschte Ergebnis. Das liegt daran, dass sich eine
prozentuale line-height-Angabe an der Schriftgröße
orientiert.
Was haben wir also für Alternativen? Die beste Variante wäre, auf
die height-Angabe zu verzichten und die Höhe der
Elemente stattdessen durch den Inhalt bestimmen zu lassen. In
unserem Beispiel durch den Text sowie die Innenabstände. Das würde
unseren Text perfekt vertikal zentrieren:
div {
background-color: lightgreen;
}
p {
padding: 2% 0;
}
Im Falle eines Inline-Elements, das man zentrieren möchte, müsste
man stattdessen dem Elternelement das padding zuweisen.
Leider gibt es aber auch im responsiven Webdesign immer noch Fälle,
wo eine prozentuale Höhe verwendet wird. Folglich brauchen wir auch
dafür eine Lösung. Ein Ansatz dafür greift auf absolute
Positionierung sowie transform: translateY() zurück.
Wichtig anzumerken ist dabei, dass zwar der Text letztendlich auch
zentriert ist, aber eigentlich der Paragraph selber zentriert wird.
html, body {
height: 100%;
}
div {
background-color: lightgreen;
height: 10%;
position: relative;
}
p {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0; /* Zurücksetzen des vom Browser vergebenen margins */
}
Bei dieser Variante wird der Paragraph im Grunde bezogen auf den
übergeordneten div-Container um 50% nach unten
“geschoben”, sodass die obere Kante des p-Elements
genau vertikal zentriert wird. Da wir aber nicht die obere Kante des
Elements, sondern die vertikale Mitte des Elements zentrieren
wollen, müssen wir mit
transform: translateY(-50%) gegensteuern und das
Element um die Hälfte der Höhe zurück nach oben schieben, sodass wir
die gewünschte vertikale Zentrierung erreichen.
Für Inline-Elemente gilt in dem Fall komplett dasselbe.
Horizontale und vertikale Zentrierung
Nachdem wir uns nun sowohl die horizontale als auch die vertikale Zentrierung für Text und Inline-Elemente angeschaut haben, versuchen wir beides zu kombinieren.
Beginnen wir mit der Variante für feste Höhen, wie z.B. 100px. Die
vertikale Zentrierung hatten wir dabei mit
line-height gelöst und die horizontale mit
text-align. Genau das können wir jetzt einfach
kombinieren:
div {
background-color: lightgreen;
height: 100px;
}
p {
line-height: 100px;
text-align: center;
}
Falls es um die Zentrierung eines Inline-Elements geht, müssen wir,
genau wie zuvor, das text-align dem Elternelement und
nicht z.B. dem Link zuordnen.
Soweit die erste Variante. Bei der Zweiten der vertikalen
Zentrierung hatten wir mit padding gearbeitet. Dies
können wir jetzt wieder machen, kombiniert mit
text-align:
div {
background-color: lightgreen;
}
p {
padding: 2% 0;
text-align: center;
}
Bei einem Inline-Element geht dies wieder genauso, allerdings
bekommt statt dem Element, das zentriert werden soll, das
Elternelement die beiden Eigenschaften
text-align sowie padding zugewiesen.
Für den Fall, dass wir mit einer prozentualen Höhe beim Container
arbeiten, greifen wir erneut auf unsere Variante mit absoluter
Positionierung sowie transform: translateY() zurück. Da
die absolute Positionierung aber dafür sorgt, dass das
p-Element seine Breite von 100% verliert, die für jedes
Block-Element Standard ist, müssen wir noch zur Korrektur eine
Breite von diesen 100% setzen, damit das
text-align wieder seinen gewohnten Effekt hat.
html, body {
height: 100%;
}
div {
background-color: lightgreen;
height: 10%;
position: relative;
}
p {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0; /* Zurücksetzen des vom Browser vergebenen margins */
width: 100%;
text-align: center;
border: 1px solid red;
}
Clevere Leser werden wissen, dass dies beim Inline-Element nicht
nötig ist. Hier reicht es aus, die Definition der Eigenschaft
text-align zum Elternelement zu verschieben, wie wir es
auch schon zuvor bei der einfachen horizontalen Zentrierung
vorgenommen haben.
Ein Bild oder ein beliebiges Block-Element zentrieren
Nun fahren wir mit den Bildern und Block-Elementen fort. Keine Angst, es wird nicht viel schwerer.
Horizontale Zentrierung
Ich würde sagen, wir beginnen mit dem Block-Element. Eine horizontale Zentrierung ist, wie eigentlich immer, relativ einfach.
In den folgenden Beispielen gehen wir von einem
div aus, den wir innerhalb eines anderen
div-Containers zentrieren möchten. Unser Mittel zum
Zweck ist diesmal die margin-Eigenschaft, welche neben
Prozent- sowie Pixelwerten usw. auch das Keyword
auto erlaubt. Im Prinzip sorgt der Wert
auto dafür, dass der Browser selbst den Außenabstand
festlegt.
Im Anwendungsfall der horizontalen Zentrierung, kann man sich das
insofern zu Nutzen machen, dass man die Abstände zu den Seiten des
Elements, also nach links und rechts, dem Browser mittels
auto
überlässt. Die Folge ist eine perfekte Zentrierung des
Block-Elements. Wichtig ist, dass man dem zu zentrierenden Element
eine beliebige Breite mitgibt, da der Container sonst einfach die
volle Breite einnimmt und es nichts zu zentrieren gibt.
div.parent {
background-color: lightgreen;
}
div.child {
background-color: red;
margin: 0 auto;
width: 800px;
padding: 1%;
}
Schön ist übrigens, dass sich die gleiche Methode auch bei Bildern
einsetzen lässt. Dabei muss lediglich beachtet werden, dass Bilder
keine Block-Elemente, sondern Inline-Block-Elemente sind. Somit muss
zuvor der display-Typ geändert werden, denn die Methode
mit margin: auto funktioniert nur bei Block-Elementen.
div {
background-color: lightgreen;
}
img {
display: block;
margin: 0 auto;
width: 800px;
}
Vertikale Zentrierung
Nun kommen wir zur vertikalen Zentrierung. Hier würden sicher viele
auf die Idee kommen, dass der margin-Trick ebenfalls
funktioniert. Dies ist aber nicht der Fall, da
margin-top und -bottom bei dem Wert
auto vom Browser auf 0 gesetzt werden.
Es hilft also alles nichts. Wir müssen leider eine Alternative finden. Die erste Möglichkeit basiert dabei auf einer festen Höhe des Block-Elements in Pixeln:
div.parent {
background-color: lightgreen;
height: 300px;
position: relative;
}
div.child {
background-color: red;
width: 100%;
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
Wie bereits früher in diesem Artikel, greifen wir wieder auf
absolute Positionierung zurück. Diesmal nutzen wir allerdings ein
negatives
margin, um den bereits vorhin beschriebenen Ausgleich
zu schaffen, der nötig ist, da sonst lediglich die obere Kante
zentriert wird. Demzufolge muss der negative
margin-top-Wert natürlich immer genau die Hälfte der
Höhe des Elements betragen, das zentriert werden soll.
Die gleiche Vorgehensweise lässt sich im Grunde wieder auf ein Bild
anwenden und diesmal muss sogar der display-Typ nicht
geändert werden.
Des Weiteren ist es allgemein empfehlenswert,
transform: translateY(-50%) dem negativem Margin
vorzuziehen, da diese Methode schlicht und ergreifend “sauberer” und
eleganter ist. Außerdem ist es damit natürlich auch möglich,
Container mit einer unbekannten bzw. prozentualen Höhe vertikal zu
zentrieren:
div.parent {
background-color: lightgreen;
height: 300px;
position: relative;
}
div.child {
background-color: red;
width: 100%;
padding: 1% 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Horizontale und vertikale Zentrierung
Eine Kombinierung von horizontaler und vertikaler Zentrierung ist erneut relativ leicht machbar.
Bei einem Block-Element mit fester Höhe und Breite kann absolute
Positionierung mit dem negativen margin
wie folgt genutzt werden:
div.parent {
background-color: lightgreen;
height: 300px;
position: relative;
}
div.child {
background-color: red;
width: 500px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -250px;
}
Der Trick ist genau derselbe, nur dass wir diesmal den Container mit
der Eigenschaft left zusätzlich um 50% nach rechts
verschieben und wieder mit margin-left dagegenhalten.
Zu beachten gilt beim linken margin, dass es
selbstverständlich die Hälfte der Breite sein muss.
Auch dies funktioniert natürlich genauso mit einem Bild und
ebenfalls würde ich wiederum dazu raten,
transform: translate() statt dem negativen
margin zu verwenden. Wie schon zuvor ermöglicht dies
die Arbeit mit prozentualen Maßen:
div.parent {
background-color: lightgreen;
height: 300px;
position: relative;
}
div.child {
background-color: red;
width: 80%;
height: 70%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Mehrere Block-Elemente horizontal zentriert in einer Zeile anordnen
Nicht selten kommt es vor, dass nicht nur ein Element zentriert werden soll, sondern z.B. drei. Diese sollen sich dann in einer Reihe bzw. Zeile befinden und horizontal zentriert werden.
Ein Lösungsansatz dafür könnte sein, den Kindelementen den
display-Typ inline-block zu verpassen,
sodass diese nebeneinander angeordnet werden und sich zudem durch
das Setzen der Eigenschaft text-align beim Elternelement zentrieren
lassen:
div.parent {
background-color: lightgreen;
height: 300px;
text-align: center;
}
div.child {
background-color: red;
display: inline-block;
height: 100%;
width: 30%;
margin-left: 1.5%;
}
div.child:first-child {
margin-left: 0;
}
Dasselbe funktioniert ebenfalls mit einer prozentualen Höhe des
Elternelements, vorausgesetzt das übergeordnete Element des
Elternelements hat eine Höhe gesetzt. Wenn dies nicht der Fall ist,
hat die prozentuale height-Angabe des Containers
nämlich keinen richtigen Bezugswert.
Mehrere Block-Elemente horizontal und vertikal zentriert in einer Zeile anordnen
Möchte man dies noch ein wenig erweitern und zusätzlich die Container auch vertikal zentrieren, ist dies durch die Kombination mit unserem Wissen zur vertikalen Zentrierung gut möglich. Diesmal verwende ich übrigens prozentuale Werte, damit ihr seht, dass beides funktioniert:
html, body {
height: 100%;
}
div.parent {
background-color: lightgreen;
height: 50%;
text-align: center;
position: relative;
}
div.child {
background-color: red;
display: inline-block;
height: 80%;
width: 30%;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: 1.5%;
}
div.child:first-child {
margin-left: 0;
}
Im Grunde handelt es sich dabei um dasselbe Prinzip, wie im Beispiel
zuvor, nur haben wir jetzt die relative Positionierung und
transform: translateY() hinzugefügt, um ebenfalls eine
vertikale Zentrierung zu erreichen. Wichtig ist, dass ihr die
Kindelemente wirklich auch relativ positioniert, da sich diese
ansonsten nicht mehr im gewöhnlichen Elementfluss befinden und nicht
mehr nebeneinander angeordnet sind.
Da es im responsiven Design aber heutzutage eher nicht gewünscht
ist, Höhen zu setzen, gibt es ebenfalls eine Möglichkeit, dem
Content die Beeinflussung der Höhen zu überlassen und trotzdem noch
die horizontale und vertikale Zentrierung hinzubekommen. Die Lösung
ist, alle height-Angaben sowie die Eigenschaften zur
vertikalen Zentrierung komplett zu entfernen und anschließend den
Kindelementen ein vertical-align von
middle zuzuweisen:
div.parent {
background-color: lightgreen;
text-align: center;
}
div.child {
background-color: red;
display: inline-block;
width: 30%;
margin-left: 1.5%;
vertical-align: middle;
}
div.child:first-child {
margin-left: 0;
}
div.child p {
margin: 0;
}
Wen es stört, dass die größte Box die gesamte Höhe des
Elternelements einnimmt, kann diesem ein padding geben.
Ansonsten ist das große Problem im Vergleich zu der Methode mit einer festen Höhe, dass alle drei Container unterschiedliche Höhen haben.
Für die Behebung dieses Problems müsste man auf eine komplett andere
Konstruktion mit dem display-Typen table
zurückgreifen, was definitiv den Rahmen dieses Artikels sprengen
würde. Wer dennoch daran interessiert ist, kann sich gerne den
folgenden Pen dazu anschauen:
See the Pen Responsive Equal Height Columns without Flexbox by JR Cologne (@jr-cologne) on CodePen.
Falls Interesse am sogenannten Thema "Equal Height Columns" besteht, kann ich dies gerne in einem zukünftigen Artikel näher beleuchten.
Was ist mit Flexbox und dem Grid-Layout?
Genauso haben viele sicherlich auch Flexbox-Lösungen vermisst. Wie ihr schon merkt, handelt es sich bei diesem Artikel um einen sehr langen und ausführlichen. Um die Länge nicht noch weiter zu strapazieren, habe ich mich dazu entschieden, die Möglichkeiten mit Flexbox und dem neuen Grid-Layout nicht zu behandeln und stattdessen in einem zukünftigen Artikel ausführlich darauf einzugehen, wie man mit diesen vergleichsweise sehr neuen Technologien Elemente zentrieren kann.
Fazit
Zusammenfassend lässt sich sagen, dass das Zentrieren mit CSS, wie schon zuvor angedeutet, ein sehr umfangreiches Thema ist. Trotz allem hält sich der Schwierigkeitsgrad allerdings meist in Grenzen, vorausgesetzt man beschäftigt sich in Ruhe mit diesem Thema und macht sich bewusst, welche Faktoren zu beachten sind.
Des Weiteren hilft es enorm, wenn man sich zumindest grob mit den
unterschiedlichen display-Typen und deren Eigenschaften
bzw. Verhalten auskennt, da dies einen der wichtigsten Faktoren beim
Zentrieren mit CSS darstellt.
Ansonsten kann ich zur allgemeinen Beruhigung noch sagen, dass man auch nicht jede einzelne Variante auswendig kennen muss, denn meist braucht man letztendlich dann doch nur zwei oder drei davon. Selbst in diesem doch sehr umfangreichen Artikel haben bei Weitem noch nicht alle Varianten Erwähnung gefunden.