CSS: Zentrieren

Erstellt: 27.04.2006 | Aktualisiert: 05.01.2009

Horizontales und Vertikales zentrieren von XHTML-Elementen: Wie können CSS-Layouts im Browser horizontal und vertikal zentriert dargestellt werden?

Horizontal

Das gesammte Layout wird in einem Container verpackt. Mit der Eigenschaft margin lässt sich diese Box horizontal zentrieren.

#container {
width:760px;
margin:0 auto;
}

Leider kommt der Internet Explorer 5.x mit dieser Anweisung nicht zurecht. Durch hinzufügen der Eigenschaft text-align im body-Element kann diese Fehlinterpretation umgangen werden.

body {
text-align:center;
}

#container {
width:760px;
margin:0 auto;
text-align:left;
}

Die Eigenschaft text-align: center im body-Element bewirkt das zentrieren des Containers. Durch die Deklaration text-align: left i container-Element wird der Text wieder normal nach links ausgerichtet.

Horizontal UND Vertikal

Vertikales Zentrieren ist keine einfache Sache. Die Varianten sind zahlreich, die richtige Darstellung in allen Browsern eigentlich ein Ding der Unmöglichkeit. Folgend einige Vorschläge:

Verwandte Snippets