Div zentrieren mit CSS: horizontal und vertikal im Container – die Wege von CSS 2.1 bis heute

In Webdesignforen taucht in schöner Regelmäßigkeit der Wunsch auf, den Seiteninhalt vertikal bzw. horizontal genau in der Mitte des Bildschirms zu plazieren. Mit ein wenig CSS ist das kein großes Problem.

Es gibt mehrere Möglichkeiten, ein Block- Level- Element mittig zu plazieren. Alle sind nicht neu und schon an einigen Stellen im Web in englischer Sprache publiziert worden. (siehe dazu die Hinweise am Ende der Seite). Dieser Artikel ist der Versuch, sie zum ersten Mal umfassend und in deutsch zu erklären.

Wenn wir nur ein einzelnes replaziertes Element mittig auf die Seite stellen wollen, mag es ausreichend sein, display:block dafür zu deklarieren. Sollen es mehrere bzw. nichtreplazierte Elemente sein, fassen wir sie in einem Block- Level- Element zusammen, am besten ein DIV, dessen Größe wir explizit festlegen. Die feste Größe ist wichtig, denn nur so können wir das Element in der Mitte plazieren. Ist sie nicht gegeben, dann werden Breite und Höhe des Elements automatisch von der Breite des umschließenden Elements bzw. vom Umfang des Inhalts bestimmt.

Wir sollten uns aber, bevor wir so etwas realisieren, über die kleinste Bildschirmgröße im klaren sein, mit der Besucher unsere Website ansurfen. Denn wenn der Schirm des Besuchers kleiner ist als der Splash-Screen, gibt es mit einigen Browsern Probleme.

Einschränkungen

Auf dieser Seite wird nur die absolute Positionierung von Block- Level- Elementen in Bezug auf das Browserfenster behandelt. Möglicherweise wird mancher auf die Idee kommen, die hier vorgestellten Techniken auf andere Weise anzuwenden, z. B. innerhalb eines Fließlayouts. Wer so etwas plant, muss bedenken, dass statisch positionierter Fließtext nicht ohne weiteres mit absolut positionierten Blöcken zusammen passt. Sobald man einen Block aus dem Fließlayout heraus nimmt und absolut positioniert, ist er nicht mehr Teil des Elementflusses. Der Fließtext schließt sich und es kommt zu Überdeckungen.

Die bessere Alternative ist in diesem Fall, mit Deklarationen wie margin:auto; oder text-align:center; zu arbeiten.

1. Horizontale Zentrierung mit margin:auto;

Hier nutzen wir die Eigenschaften margin-right und margin-left, um den DIV-Container horizontal in der Mitte zu plazieren. Wenn wir für beide den Wert auto deklarieren, sollen sie nach der Spezifikation vom Browser durch zwei gleich große Werte ersetzt werden.

Diese Methode funktioniert mit allen modernen Browsern, Ausnahme ist hier IE/Win 5 (wobei der auch eigentlich nicht mehr 'modern' genannt werden kann). Als Umgehung dieses Problems nutzen wir einen anderen Fehler des IE/Win 5 zu unserem Vorteil: er wendet die Eigenschaft text-align auch auf Block- Level- Elemente an.

Wenn wir also text-align:center; für das umschließende Element unseres DIV-Containers deklarieren, wird dieser dadurch in IE/Win 5 horizontal mittig plaziert. Wenn diese Ausrichtung für den Text in unserem DIV-Container unerwünscht ist, müssen wir sie anschließend dort wieder rück-deklarieren, denn der Wert dieser Eigenschaft wird weitervererbt.

Auf diese Art wird der Container zwar horizontal in die Mitte gestellt, aber eine vertikale Zentrierung lässt sich so nicht erreichen: um Abstand zum oberem Rand zu haben, muss margin-top mit einem willkürlichen Wert deklariert werden. Deshalb ist diese Methode eher geeignet, allgemeine Inhalte mittig auf die Seite zu stellen, mit gleich breiten Rändern rechts und links.

Beispiel 1 zeigt einen horizontal zentrierten DIV-Container, der ein Image enthält und 100 Pixel Abstand vom oberen Bildrand hat.
Das CSS des Beispiels (die wichtigen Deklarationen sind in rot hervorgehoben):

body {
    color: #fff;
    background: #222289
                url(/graphics/textil14l.gif);
    padding: 0;
    margin: 0;
    text-align: center;
    }
#main {
    background-color: transparent;
    text-align: left;
    padding: 7px;
    border: 1px dashed #b9821a;
    margin: 100px auto 0;
    width: 500px;
    height: 375px;
    }

2. Horizontale und vertikale Zentrierung durch negative margins

Die Zentrierung eines Block- Level- Elementes in beiden Richtungen bedeutet nichts anderes, als dass wir seinen Mittelpunkt mit dem Mittelpunkt des umschließenden Blocks zur Deckung bringen.

Leider gibt es keine Deklaration, durch die wir das unmittelbar erreichen können. Wir können aber dasselbe in mehreren Schritten erreichen. Zur Vereinfachung der Darstellung nehmen wir an, dass der umschließende Block mit dem Stammelement (sprich: Browserfenster) identisch ist.

Zuerst positionieren wir unseren DIV-Container absolut, so dass seine obere linke Ecke genau im Zentrum des Browserfensters liegt. Dazu brauchen wir folgendes CSS (nur die notwendigen Deklarationen sind in rot hervorgehoben):

#main {
    background-color: transparent;
    padding: 7px;
    border: 1px dashed #b9821a;
    margin: 0;
    position:absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 375px;
    }

Was unser CSS bis hierhin bewirkt, zeigt Beispiel 2a. Um das Prinzip deutlich zu machen und Scrollbalken auf kleineren Bildschirmen zu vermeiden, wurde an den Elementen HTML und BODY zusätzlich overflow:hidden; deklariert. Opera 7 hat damit seine Probleme, letztlich hat das aber nichts mit der Zentrierung eines Block- Level- Elements zu tun.

Jetzt machen wir uns die Tatsache zunutze, dass ein Element zu der Seite 'hingezogen' wird, an der wir es mit einer negativen margin versehen. Da unser DIV-Container mit seiner Ecke genau im Mittelpunkt des Browserfensters liegt, müssen wir ihn um die Hälfte seiner Breite nach links und um die Hälfte seiner Höhe nach oben 'ziehen'. Dazu addiert werden müssen noch die Werte für padding und border-width auf den jeweiligen Seiten.

Hier ist das CSS (Änderungen sind in rot hervorgehoben)...

#main {
    background-color: transparent;
    padding: 7px;
    border: 1px dashed #b9821a;
    margin: -196px 0 0 -258px;
    position:absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 375px;
    }

...und hier das Ergebnis als Beispiel 2b: der DIV-Container ist in die Mitte gerutscht.

Selbstverständlich ist man nicht darauf angewiesen, mit top und left zu arbeiten, denselben Effekt erzielt man auch mit right und bottom oder zwei anderen Seiten. Wichtig ist, dass sie nebeneinander, nicht gegenüber, liegen. Wir müssen allerdings immer die beiden margins der entsprechenden Seiten negativ deklarieren.

Da wir hier noch overflow:hidden; für das Element body deklariert haben, wird der zentrierte Block an den Rändern abgeschnitten, sollte er einmal größer als das Browserfenster sein. Dieses Verhalten ist völlig korrekt und wird auch von allen modernen Browsern so dargestellt, einzig der Internet Explorer (bis Version 7!) bringt am Browserfenster Scrollbalken an. Abhilfe schafft hier die Deklaration des Wertes hidden auch für das Element html.

3. Schachtelung in einen zentrierten Pixel

Die hier geschilderte Möglichkeit ist etwas aufwendiger, sie kann aber dennoch manchmal besser geeignet sein als die anderen beiden Möglichkeiten. Dazu positionieren wir ein Element DIV von nur einem Pixel Größe absolut in der Mitte des Bildschirms. Im Beispiel 3a ist dieser eine Pixel in der Bildschirmmitte weiß eingefärbt und gut erkennbar. Dort hinein schachteln wir den DIV-Container, der unsere Inhalte enthält. Wir positionieren ihn ebenfalls absolut und geben der Eigenschaft top die negative halbe Höhe als Wert und der Eigenschaft left die negative halbe Breite als Wert. Dazu addieren wir noch die Werte für padding, border-width und margin und jeweils einen Pixel für den 1 Pixel großen umschließenden Block. Dadurch steht unser DIV-Container, abgesehen von möglichen Rundungsfehlern, genau in der Mitte des Bildschirms. Jetzt brauchen wir nur noch dem 1-Pixel-Container die Deklaration overflow:visible; zu geben, damit die Inhalte auch wirklich in allen Browsern dargestellt werden. Das Ergebnis ist im Beispiel 3b zu sehen.

Das CSS dazu sieht so aus (die notwendigen Deklarationen sind in rot hervorgehoben):

#pixel {
    background-color: #fff;
    width: 1px;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: visible;
    }
#main {
    background-color: transparent;
    padding: 7px;
    border: 1px dashed #b9821a;
    margin: 0;
    position: absolute;
    top: -195px;
    left: -259px;
    width: 500px;
    height: 375px;
    }

4. Horizontale und vertikale Zentrierung durch Hintergrundgrafik

Wenn wir nur ein Element IMG im Zentrum des Bildschirms plazieren wollen, kann dies ebensogut ein Hintergrundbild sein. Es handelt sich also hier nicht um die Zentrierung eines Block- Level- Elements. Mit den entsprechenden Werten für die Eigenschaft background stellen wir es genau in die Mitte und vermeiden die Kachelung des Hintergrundes (auch hier sind die direkt notwendigen Deklarationen wieder in rot hervorgehoben):

BODY {
    color: #fff;
    background: #312d4d
                url(/graphics/still-life_redorange.jpg)
                no-repeat
                50% 50%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    }

Beispiel 4a zeigt, wie es aussieht. Im Unterschied zu den Beispielen 1 bis 3 fehlen hier das blaue Hintergrundmuster des Elements BODY und der Rahmen um das zentrierte Bild. Der Grund dafür ist, dass für BODY jetzt das zentrierte Image als Hintergrund deklariert ist und das Element DIV, an dem der Rahmen angebracht war, hier nicht mehr vorhanden ist.

Zudem befindet sich das Hintergrundbild nicht genau in der Bildmitte. Das liegt daran, dass in diesem Fall die Höhe des Elements body nicht definiert ist.

Die exakt gleiche Darstellung wie in den voran gegangenen Beispielen erreichen wir, indem wir ein Block- Level- Element auf die bekannte Weise mittig plazieren und diesem DIV-Container dann ein Hintergrundbild geben. Falls wir auch padding oder margin deklarieren wollen, müssen wir den Hintergrund ebenfalls zentrieren. Dazu verwenden wir den Wert center anstelle von 50% 50%, denn damit wird die Darstellung auch in Opera 7 korrekt.

Hier ist das CSS dazu:

BODY {
    color: #fff;
    background: #312d4d
                url(/graphics/textil14l.gif);
    padding: 0;
    margin: 0;
    overflow: hidden;
    }
#main {
    background: transparent
                url(/graphics/still-life_redorange.jpg)
                no-repeat
                center;
    padding: 7px;
    border: 1px dashed #b9821a;
    margin: -196px 0 0 -258px;
    position:absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 375px;
    }

Und so sieht es aus: Beispiel 4b.
Für Surfer mit standardstreuen Browsern ist noch ein zusätzlicher Gimmick eingebaut. Er wird sichtbar, wenn Sie den Cursor über das Bild bewegen.

Zum Abschluss noch ein paar Spielereien für alle, die mit einem standardskonformen Browser hier sind: Beispiel 5 zeigt, dass ein Splash-Screen nicht nur aus einem Element bestehen muss. Es lassen sich auch mehrere absolut positionierte Blocks kombinieren. Mit :hover und etwas Phantasie finden sich eine Menge Möglichkeiten.

Beispiel 6 zeigt etwas Ähnliches. Fahren Sie einfach einmal mit dem Cursor über den 'leeren' Bildschirm.

Hinweise:
Die Anregung zu diesem Artikel geht auf Veröffentlichungen von Blue Robot (eins und zwei), Joe Gillespie, Tom Gilder, Roger Johansson (jetzt offline), Jon Hicks und Owen Briggs zurück, die mit eigenen Ideen und Ausarbeitungen angereichert wurden.

Div zentrieren horizontal – margin: auto und seine Voraussetzung

Wer ein div zentrieren will, braucht zuerst eine Breite. Ein Block-Element mit fester Breite steht mittig in seinem Container, wenn linker und rechter Außenabstand auto sind. Die Spezifikation verteilt den übrigen Platz dann gleichmäßig auf beide Seiten. Die Voraussetzung ist die Breite: Ohne width nimmt ein Block die volle Breite des Containers ein, und es bleibt nichts zu verteilen. text-align: center zentriert dagegen nur den Inline-Inhalt einer Box – Text, Bilder, Inline-Elemente – und wirkt nicht auf ein Block-Element als Ganzes.

.kasten {
  width: 32em;          /* oder max-width: 32em für schmale Bildschirme */
  margin-left: auto;
  margin-right: auto;
}

Mit max-width statt width bleibt die Box auf schmalen Bildschirmen innerhalb des Containers und zentriert sich, sobald Platz übrig ist. Das ist die heute übliche Form.

Div zentrieren vertikal – die Lösung aus CSS 2.1

Ein div zentrieren in der Senkrechten ist schwieriger: Vertikal ist margin: auto in CSS 2.1 wirkungslos: Für margin-top und margin-bottom wird auto zu 0. Der klassische Weg ist absolute Positionierung: Der Container bekommt position: relative, die Box position: absolute; top: 50% und einen negativen oberen Außenabstand von der halben eigenen Höhe. Das setzt eine bekannte Höhe voraus; bei fließendem Inhalt ersetzt transform: translateY(-50%) aus CSS Transforms den negativen Abstand und funktioniert ohne bekannte Höhe.

.container { position: relative; height: 24em; }
.kasten {
  position: absolute;
  top: 50%; left: 50%;
  width: 20em; height: 8em;
  margin: -4em 0 0 -10em;    /* halbe Höhe, halbe Breite */
}

Für Inline-Inhalt in einer Zeile gibt es den zweiten Weg aus CSS 2.1: display: table-cell; vertical-align: middle auf dem Container. Er zentriert Text und Inline-Boxen vertikal, ohne dass eine Höhe bekannt sein muss, verlangt aber, dass die Box wie eine Tabellenzelle behandelt wird.

Horizontal und vertikal zugleich – Flexbox und Grid

Die Module nach CSS 2.1 machen aus dem Zentrieren eine Eigenschaft des Containers, nicht der Box. Mit Flexbox: display: flex; justify-content: center; align-items: center. Mit Grid: display: grid; place-items: center. Beide brauchen weder Breite noch Höhe der Box, zentrieren mehrere Kinder ebenso wie eines, und der Container behält seine Höhe aus dem Inhalt oder aus einer Angabe. Grid ist die kürzere Schreibweise; Flexbox passt, wenn die Kinder in einer Reihe stehen sollen.

.container {
  display: grid;
  place-items: center;   /* align-items + justify-items */
  min-height: 24em;
}

Der Unterschied zu CSS 2.1 liegt nicht im Ergebnis, sondern im Ort der Regel: Das Zentrieren gehört zum Container, und die Box weiß nichts davon. Für die Modelle dahinter siehe Flexbox und Grid.

Container und Fallen beim div zentrieren

• Der Container hat keine Höhe. Vertikales Zentrieren braucht einen Bezug. Ein Container, dessen Höhe aus dem Inhalt kommt, ist genau so hoch wie die Box – es gibt nichts zu zentrieren. min-height oder eine feste Höhe schafft den Bezug.
• Zusammenfallende Außenabstände. Ein margin-top auf der Box kann mit dem des Containers zusammenfallen und die Box nach außen statt nach innen versetzen. Ein padding oder border am Container verhindert das.
• Inline-Block statt Block. Ein span oder img ist inline; margin: auto wirkt darauf nicht. Entweder display: block setzen oder den Inline-Inhalt mit text-align: center am Container zentrieren.
• Absolut positionierte Box im falschen Bezug. top: 50% bezieht sich auf den nächsten positionierten Vorfahren. Fehlt position: relative am Container, ist der Bezug das Anfangs-Containing-Block – die Box landet mittig im Fenster, nicht im Container.

Beispiele

Die Beispiele sind eigenständige Dokumente und werden hier so dargestellt, wie ein Browser sie rendert.

Häufige Fragen

Wie zentriert man ein div horizontal mit CSS?

Eine Breite setzen (width oder max-width) und margin-left und margin-right auf auto. Der übrige Platz wird gleichmäßig auf beide Seiten verteilt. Ohne Breite nimmt ein Block den ganzen Container ein.

Warum funktioniert text-align: center nicht für ein div?

text-align richtet nur den Inline-Inhalt einer Box aus: Text, Bilder, Inline-Elemente. Ein Block-Element als Ganzes wird davon nicht bewegt. Dafür ist margin: auto mit einer Breite zuständig.

Wie zentriert man ein div vertikal?

In CSS 2.1 mit position: absolute; top: 50% und einem negativen margin-top von der halben Höhe, im positionierten Container. Ohne bekannte Höhe: transform: translateY(-50%). Am einfachsten heute: Container mit display: grid; place-items: center.

Warum wirkt margin: auto vertikal nicht?

CSS 2.1 setzt auto für margin-top und margin-bottom im normalen Fluss auf 0. Nur in Flexbox und Grid verteilt margin: auto auch vertikal den freien Platz.

Wie zentriert man horizontal und vertikal zugleich?

Mit Grid: display: grid; place-items: center auf dem Container. Mit Flexbox: display: flex; justify-content: center; align-items: center. Der Container braucht eine Höhe, etwa min-height, sonst ist er so hoch wie die Box.

Kann man ein Bild wie ein div zentrieren?

Ja, wenn es zum Block wird: display: block; margin: auto und eine Breite. Als Inline-Element zentriert es sich stattdessen über text-align: center am umgebenden Block.

Was ist der Unterschied zwischen Flexbox und Grid beim Zentrieren?

Beide zentrieren ohne bekannte Maße. Grid braucht eine Deklaration (place-items: center), Flexbox zwei. Flexbox ordnet mehrere Kinder in einer Reihe an, Grid in Zellen; für ein einzelnes Element ist das Ergebnis gleich.

Warum landet die absolut positionierte Box in der Fenstermitte statt im Container?

Weil top: 50% sich auf den nächsten positionierten Vorfahren bezieht. Hat der Container kein position: relative, ist der Bezug das Anfangs-Containing-Block, also das Fenster.