Wie kann ich Inhalte genau in der Mitte des Anzeigefensters positionieren?

Drei mögliche Antworten auf diese Frage sollen hier vorgestellt werden:

Zentrierung mit Außenabständen

Anzeigebeispiel: margin.html

Eine der einfachsten Lösungen: Die linke obere Ecke des Elements wird genau in die Mitte des Anzeigefensters positioniert, das Element dann per Außenabstände um die halbe Höhe (bzw. Breite) nach oben (bzw. links) verschoben.

CSS

position: absolute;
top: 50%;
left: 50%;
margin-top: -Elementhöhe/2;
margin-left: -Elementbreite/2;

Probleme

Elementbreite und -höhe bezeichnen die Gesamtgröße des Elements, d.h. inklusive padding und border-width. Für ein korrektes Funktionieren müssen also all diese Angaben in derselben Einheit gesetz werden.

Ein viel gravierenderes Problem tritt jedoch auf, wenn die Größe des zu zentrierenden Elements die Größe des Anzeigefensters übersteigt: In diesem Fall sind Teile des Elements durch Scrollen nicht mehr erreichbar!

Zentrierung mit absoluter Positionierung

Anzeigebeispiel: position.html

Das Element wird so positioniert, dass der Abstand zu jedem Rand des Anzeigefensters verschwindet. Da die Größe des Elements fest ist, erzeugt margin: auto gleichmäßige Abstände nach allen Seiten.

CSS

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

Probleme

Funktioniert nicht im Internet Explorer.

Zentrierung mit Platzhalter

Anzeigebeispiel: spacer.html

Die horizontale Zentrierung erfolgt über die Außenabstände. Für die vertikale Zentrierung wird vor dem Element ein Platzhalter eingefügt, der die halbe Höhe des Anzeigefensters einnimmt. Damit diese definiert ist, muss die Höhe der Elemente html und body auf 100% gesetzt werden. Der Platzhalter erhält einen negativen Außenabstand nach unten vom Betrag der halben Höhe des zu zentrierenden Elements und wird über die visibility-Eigenschaft versteckt.

Bis jetzt besitzt diese Lösung dasselbe Problem bei zu kleinem Anzeigefenster, das schon bei unserer ersten Lösung mit Außenabstäden auftrat. Der entscheidende Trick ist nun folgender: Der Platzhalter erhält ein float: left (was das Problem behebt), das zu zentrierende Element ein clear: left (damit es immernoch an der korrekten Position angezeigt wird).

HTML

<html>
 <body>
  <div id="spacer"></div>
  <div id="center">Zentrierter Inhalt</div>
 </body>
</html>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#spacer {
    width: 1px;
    height: 50%;
    margin-bottom: -Elementhöhe/2;
    visibility: hidden;
    float: left;
}
#center {
    margin: 0 auto;
    clear: left;
}

Probleme

Für die Elementhöhe gilt das beim ersten Beispiel Gesagte. Außerdem benötigt man ein inhaltloses Element ohne semantischen Mehrwert. Von den drei vorgestellten Lösungen ist dies die komplexeste, die dafür aber auch im Internet Explorer funktioniert.