Für jede Situation
gibt es mindestens eine CSS-Methode.

margin

Hinweis: Der automatische Aussenabstand (margin) zentriert einzelne Block Elemente horizontal. Ein zeitloser Klassiker im Webdesign.

EigenschaftBedeutung
margin: 0 auto;Ist ein Block-Element im Fluss kann es über den AUTO Wert bei MARGIN für links und rechts innerhalb seines Eltern-Elements zentriert werden. Man kann über diese Methode pro Zeile nur 1 Element zentrieren, da Display-Block folgende Elemente in eine neue Zeile zwingt. Damit die horizontale Zentrierung erfolgt, muss die WIDTH kleiner als 100% sein. Es ist nicht möglich vertikal zu Zentrieren.

Eigene Bedingung

ZentriertPOSITION: (Selbst)DISPLAY: (Selbst)WIDTH: (Selbst)
SelbstSTATIC; RELATIVE;BLOCK;<100%

Bedingung für die Kinder

POSITION: (Kinder)DISPLAY: (Kinder)WIDTH: (Kinder)
STATIC; RELATIVE;EgalEgal

text-align

Hinweis: Text der Elemente und alle INLINE-Kinder können mit text-align zentriert werden.

EigenschaftBedeutung
text-align: center;Der eigenen Text und alle INLINE* Kinder-Elemente wie z. B. A (Links), SPAN, IMG werden innerhalb von Elementen mit der Eigenschaft TEXT-ALIGN: CENTER; horizontal zentriert. Reicht der Platz in der Zeile nicht für alle Elemente aus, dann beginnt eine neue Zeile.

Eigene Bedingung

ZentriertPOSITION: (Selbst)DISPLAY: (Selbst)WIDTH: (Selbst)
Eigener Text und INLINE*-KinderEgalEgalNein

Bedingung für die Kinder

POSITION: (Kinder)DISPLAY: (Kinder)WIDTH: (Kinder)
STATIC; RELATIVE;Text; INLINE* (INLINE-BLOCK; INLINE-FLEX ... etc.)Egal

margin und text-align

Hinweis: Margin: 0 auto und text-align: center können kombiniert werden.

EigenschaftBedeutung
margin: 0 auto;Ist ein Block-Element im Fluss kann es über den AUTO Wert bei MARGIN für links und rechts innerhalb seines Eltern-Elements zentriert werden. Man kann über diese Methode pro Zeile nur 1 Element zentrieren, da Display-Block folgende Elemente in eine neue Zeile zwingt. Damit die horizontale Zentrierung erfolgt, muss die WIDTH kleiner als 100% sein. Es ist nicht möglich vertikal zu Zentrieren.

Bedingung für margin: 0 auto

ZentriertPOSITION: (Selbst)DISPLAY: (Selbst)WIDTH: (Selbst)
SelbstSTATIC; RELATIVE;BLOCK;<100%

Bedingung für die Kinder

POSITION: (Kinder)DISPLAY: (Kinder)WIDTH: (Kinder)
STATIC; RELATIVE;EgalEgal


EigenschaftBedeutung
text-align: center;Der eigenen Text und alle INLINE* Kinder-Elemente wie z. B. A (Links), SPAN, IMG werden innerhalb von Elementen mit der Eigenschaft TEXT-ALIGN: CENTER; horizontal zentriert. Reicht der Platz in der Zeile nicht für alle Elemente aus, dann beginnt eine neue Zeile.

Bedingung für text-align: center

ZentriertPOSITION: (Selbst)DISPLAY: (Selbst)WIDTH: (Selbst)
Eigener Text und INLINE*-KinderEgalEgalNein

Bedingung für die Kinder

POSITION: (Kinder)DISPLAY: (Kinder)WIDTH: (Kinder)
STATIC; RELATIVE;Text; INLINE* (INLINE-BLOCK; INLINE-FLEX ... etc.)Egal

left und translateX

Hinweis: Absolute oder fixierte Elemente werden am Besten über Left: 50% und translateX(-50%) horizontal zentriert.

EigenschaftBedeutung
left: 50%; transform: translateX(-50%);Elemente, die in ihrer Position nicht im Fluss sind können nur relativ zu ihrem Bezugspunkt zentriert werden. Der Bezugspunkt ist bei ABSOLUTE das letzte Eltern-Element mit position: RELATIVE. Bei FIXED ist der Bezugspunkt immer der BODY. LEFT:50% schiebt das Element um die Hälfte seiner Breite von den linken Rand weg. Bei LEFT muss (!) ein Prozentwert eingegeben werden. Bezugspunkt für Left ist die linke obere Ecke. Daher muss das Element um die Hälfte seiner eigenen Breite "zurückgezogen" werden. Dies geschieht mit TRANSLATEX. Man kann über diese Methode nur 1 Element zentrieren. Eine Reihe von Elementen müssen in einen Container gepackt werden und dann wird dieser mit der Methode zentriert. Ein großer Vorteil dieser Methode ist, dass aufgrund von TRANSLATEX die Breite des Elements nicht bekannt sein muss. Vorsicht: TRANSLATEX ist ein Wert von TRANSFORM und kann somit leicht überschrieben werden. LEFT: auto "deaktivert" den Bezug zum linken Rand und führt, anders als bei MARGIN, nicht zum gewünschten Resultat.

Eigene Bedingung

ZentriertPOSITION: (Selbst)DISPLAY: (Selbst)WIDTH: (Selbst)
Sich selberABSOLUTE; FIXED;Egal<100%

Bedingung für die Kinder

POSITION: (Kinder)DISPLAY: (Kinder)WIDTH: (Kinder)
STATIC; RELATIVE; ABSOLUTE; EgalEgal

flex

Hinweis: Mit dem relativ jungen Bündel an Eigenschaften rund um display: FLEX lassen sich Zentrierungen und weitere Stylings vornehmen.

EigenschaftBedeutung
display: flex; justify-content: space-around; align-items: center;Alle direkten Kinder von display: FLEX können nicht nur horizontal, sondern auch vertikal zentriert werden, unabhängig von ihren eigenen DISPLAY Werten. Sie müssen allerdings im Fluss sein. Außerdem können gegenüber allen anderen Methoden weitere Details angepasst werden. Z. B. die Reihenfolge der Kinder-Elemente kann bestimmt werden. Breiten, Höhen und Zwischenräume können ebenfalls flexibel bestimmt werden. Kinder von FLEX-Containern können für ihre eigenen Kinder ebenfalls FLEX-Containern werden (Nesting).

Eigene Bedingung

ZentriertPOSITION: (Selbst)DISPLAY: (Selbst)WIDTH: (Selbst)
KinderEgalEgalNein

Bedingung für die Kinder

POSITION: (Kinder)DISPLAY: (Kinder)WIDTH: (Kinder)
STATIC; RELATIVE;EgalEgal

top und translateY

Hinweis: Bei pulsierenden Animationen dieser Art ist diese Methode sehr praktisch. Würde aber auch bei Flex funktionieren.

EigenschaftBedeutung
top: 50%; transform: translateY(-50%);Elemente, die in ihrer Position nicht im Fluss sind können auch horizontal relativ zu ihrem Bezugspunkt zentriert werden. Der Bezugspunkt ist bei ABSOLUTE das letzte Eltern-Element mit position: RELATIVE. Bei FIXED ist der Bezugspunkt immer der BODY. Ein großer Vorteil dieser Methode ist, dass aufgrund von TRANSLATEY die Höhe des Elements nicht bekannt sein muss. TRANSLATEY ist ein Wert von TRANSFORM und kann somit leicht überschrieben werden. Natürlich können eine vertikale und horizontale Zentrierung kombiniert werden.

Eigene Bedingung

ZentriertPOSITION: (Selbst)DISPLAY: (Selbst)HEIGHT: (Selbst)
SelbstABSOLUTE; FIXED;Egal<100%

Bedingung für die Kinder

POSITION: (Kinder)DISPLAY: (Kinder)WIDTH: (Kinder)
STATIC; RELATIVE; ABSOLUTE;EgalEgal

vertical-align

Hinweis: Diese Methode gilt nur in Elementen mit display: table-cell (td oder th).

EigenschaftBedeutung
vertical-align: center;Innerhalb von TD (Table-Data bzw. Tabellen-Zelle) kann leicht vertikal zentriert werden. Mit der Eigenschaft display: TABLE-CELL kann jedes Element für VERTICAL-ALIGN nutzbar gemacht werden. Jedoch bietet display: FLEX mehr Vorteile, z.B. zentrieren von BLOCK Elementen oder Feinabstimmungen wie das Anpassen des Zwischenraums.

Eigene Bedingung

ZentriertPOSITION: (Selbst)DISPLAY: (Selbst)HEIGHT: (Selbst)
Eigener Text und INLINE*-KinderEgaldisplay: table-cell; (Pflicht)Egal

Bedingung für die Kinder

POSITION: (Kinder)DISPLAY: (Kinder)WIDTH: (Kinder)
STATIC; RELATIVE;Text; INLINE* (INLINE-BLOCK; INLINE-FLEX ... etc.)Egal

left und margin-left

Hinweis: Diese Methode sollte nur als Fallback genutzt werden, wenn die Kombination mit LEFT: 50% und TRANSFORM nicht angewendet werden kann.

EigenschaftBedeutung
left: 50%; margin-left: -200px;Diese ältere Methode ist der Ursprung der Methode von LEFT:50% und TRANSFORM. Sie hat allerdings den großen Nachteil, dass die Breite der CSS-BOX (Margin, Border, Padding, Width) bekannt sein muss. Diese wird addiert und davon die Hälfte wird MARGIN-LEFT zugewiesen. Jede Anwendung muss also spezifisch konzipiert werden. Die Methode kann allerdings als Fallback für die Kombination mit TRANSFORM nützlich sein.

Eigene Bedingung

ZentriertPOSITION: (Selbst)DISPLAY: (Selbst)HEIGHT: (Selbst)
SelbstABSOLUTE; FIXED;EgalEgal

Bedingung für die Kinder

POSITION: (Kinder)DISPLAY: (Kinder)WIDTH: (Kinder)
STATIC; RELATIVE; ABSOLUTE; EgalEgal

► Weitere Infos

Allgemeiner Hinweis zu <CENTER>: Wir unterstützen bei CODE den HTML5-Standard. Das alte HTML4 Element <CENTER> ist hier unerwünscht. Für Styling wird CSS eingesetzt und deshalb zeigen wir die heute gängigen CSS-Methoden für das Zentrieren von Elementen.

Interne Quellen

Positions, Display und Flexbox

http://code.arnoldbodeschule.de/.../layout/

Viele Beispiele und Texte zu den Positions, Display und Flexbox.