suit.rebell.at

Oft möchte man eine Seite mittig in den Anzeigebereich des Browserfensters stellen (also horizontal und vertikal zentriert) und sucht dabei die eierlegende Wollmilchsau. Aber jeder, der sich bereits auf die Suche nach dem Heiligen Gral begeben hat, wird an den angebotenen Lösungen irgendwo einen Haken entdeckt haben.

In erster Linie soll der Code standardkonform und leicht verständlich sein, vor allem soll er ohne viel zusätzliches oder verwirrendes Markup in gängige Layouts übernommen werden können. Auf komplizierte oder unsichere Hacks soll auch nach Möglichkeit verzichtet werden. Es versteht sich von selbst, dass eine Layout-Tabelle nicht in Frage kommt.

Die zuvor angesprochenen Probleme sollen keinesfalls auftreten, der zu zentrierende Bereich soll sich dynamische bei einer Anzeigebereichsänderung neu ausrichten, ebenso sollen bei einem zu kleinen Anzeigebereich wie gewohnt Scrollbalken zur Verfügung stehen.

Letztendlich muss die Lösung auch ohne JavaScript in sämtlichen gängigen Browsern funktionieren. Dazu zählen der Internet Explorer ab Version 6, MozillaFirefox, Opera sowie Safari und natürlich Chrome.

Probleme mit gängigen Lösungen

Die wohl gebräuchlichste Methode ist es, die Inhalte mit einer Tabelle und dem Attribut valign zu zentrieren. Diese Methode ist aber in mehrerlei Hinsicht nicht geeignet: einerseits ist die dafür nötige Verwendung des height-Attributs in der Tabelle nicht standardkonform, andererseits ist die Verwendung der Tabelle semantisch nicht sinnvoll.

Eine ebenfalls sehr verbreitete Methode ist das Zentrieren mittels position: absolute; und einem Links- und Hochwert von 50% sowie einem negativen margin um die Hälfte der Breite des Elements in die entgegengesetzte Richtung. Diese Lösung funktioniert augenscheinlich in jedem Browser - sobald aber der Anzeigebereich des Browsers kleiner wird als sein Inhalt, verschwindet der Inhalt nach links oben aus dem Viewport und kann aufgrund des negativen margins nicht mehr durch die Scrollbalken des Browserfensters erreicht werden - dies führt vor allem bei mobilen Geräten mit sehr kleinen Anzeigebereichen zur Unbenutzbarkeit der Seite.

Die dritte verbreitete Methode setzt auf bis zu neun Frames in teilweise komplizierten Verschachtelungen. Je nach Client-Einstellung führt das zu äußerst unschönen Rahmen oder Scrollbalken um die einzelnen Frames, anderseits ist die Adresszeile des Browsers nicht mehr wie gewohnt bedienbar - diese Variante ist also auch eher etwas für die Rundablage.

Daneben existieren noch absurde Varianten, die mit JavaScript oder gar den proprietären dynamischen Eigenschaften des Internet Explorers arbeiten - auf diese möchte ich aber gar nicht näher eingehen.

Erklärung der Funktionsweise

Zunächst werden die beiden Elemente html und body auf eine Höhe von 100% gebracht. Um den daraus resultierenden vertikalen Scrollbalken zu eliminieren werden die Elemente noch von Aussenabständen befreit.

Das zuvor angesprochene Element mit der ID top bekommt nun 50% Höhe und 1 Pixel Breite zugewiesen, das untere Ende des Elements befindet sich somit immer exakt in der vertikalen Mitte des Anzeigebereichs. Damit das nachfolgende Element mit der ID container visuell nicht erst ab hier beginnt, wird ein negativer unterer Aussenabstand entsprechend der halben Höhe des zu zentrierenden Containers gesetzt. float: left; sorgt schließlich dafür, dass der Container um das top-Element herumfließen kann - aus dem Textfluss genommen wirkt die margin-bottom-Eigenschaft nicht mehr - sobald der Container an der oberen Seite des Anzeigebereichs anstößt. Somit kann das Element nicht mehr unscrollbar aus dem Anzeigebereich verschwinden.

Das Container-Element stellt mittels clear: left; den Textfluss wieder her - ansonsten würde das Element an seinem vorhergehenden Element vorbeifließen und einfach daneben an der oberen Kante des Anzeigebereichs kleben. Über die gewohnte Methode mit margin: 0 auto; wird das Block-Element schließlich horizontal zentriert. Die Breite kann beliebig gewählt werden, die Höhe ebenfalls - allerdings muss der negative Aussenabstand des vorhergehenden Elements auf die Hälfte dieses Wertes korrigiert werden.

Relative oder absolute Größenangaben

Die im Beispiel gewählten em-Werte lassen sich problemlos durch andere Einheiten, etwa ex oder px ersetzen. Eine Angabe in % ist rechnerisch allerdings nicht möglich. Um Prozent-Werte zu verwenden, muss die Höhe des Elements mit der ID top auf die die Hälfte der Resthöhe des body-Elements angepasst und der negative margin-Wert entfernt werden (bei 75% Höhe des Containers muss die Höhe von top 12.5% betragen).