Zentrieren per CSS

Zentrieren ist immer noch ein aktuelles Thema, denn herkömmliches mit allen derzeit gebräuchlichen Browsern nutzbares CSS vermag Inhalte nicht vertikal zu zentrieren. Auch das Ausrichten von Schrift auf bzw. über einer Grundlinie ist nicht immer möglich. Als verläßliche Methode für fast alle Browser bleibt der Einsatz von Tabellen.

Tabellen per CSS

Moderne Browser erlauben solch einen Tabelleneinsatz auch durch die Festlegung entspr. Styleeigenschaften statt der Umstellung des HTML-Codes auf Tabellen-Layout. Ebenfalls für moderne Browser geeignet sein kann die Angabe von Eckpunkten ausserhalb der eigentlichen Elementgröße, der Browser versucht dann eine Lösung “in der Mitte”.

Explorer

Schwierig wird es nun für die Internet-Explorer, zumindest bis einschließlich IE 7. Einfache Zentrierungen per negativem margin und position bzw. top lassen bei kleiner Nutzfläche Teile des Elements unscrollbar oben außerhalb des Viewport verschwinden.
Abhilfe könnte im Einzelfall mittels eines zusätzlichen Elements geschaffen werden, das die Höhe des Body rechtzeitig erzwingt. Nun geht es ja bei CSS um möglichst wenig Eingriffe in den HTML-Code zu Layoutzwecken, also wird diese Möglichkeit hier nicht weiter berücksichtigt.

JavaScript

Falls eine Lösung für die gebräuchlichen modernen Browser möglich ist, wird zunächst ein Workaround für die IEs per JavaScript, auch in Form von expressions, zugelassen.

Zunächst geht es um das Zentrieren eines Containers im body.

Zentrierung für Firefox

#container {
width:816px;height:720px;
position:absolute;
top:0px;bottom:0px;left:0px;right:0px;
margin:auto;
}

Nachhilfe für IE 5 bis 6

* html body #container 
{position:expression("relative");
top:expression(document.body.clientHeight<700?'2px': (document.body.clientHeight/2-350));
left:expression(document.body.clientWidth<730?'2px': document.body.clientWidth/2-405);
}

Neuere IEs

*:first-child+html #container {
top:expression(document.getElementsByTagName('html')[0].clientHeight <700?'2px':document.getElementsByTagName('html')[0].clientHeight/2-350);
left:expression(document.getElementsByTagName('html')[0].clientWidth <700?'2px':document.getElementsByTagName('html')[0].clientWidth/2-390); 
}

Safari und Opera

@media screen and (-webkit-min-device-pixel-ratio:0){
 #container {position:relative;}
 html {display:table;height:100%;width:100%;}
 body{display:table-cell;vertical-align: middle;
height:100%;margin:auto;width:100%;}
}

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
 #container {position:relative;}
 html {display:table;height:100%;width:100%;}
 body{display:table-cell;vertical-align: middle;
height:100%;margin:auto;width:100%;}
}

Explorer 7

Nun läßt sich da noch Einiges vereinfachen. Ausserdem haben die Internet Explorer 7 und 8 tatsächlich ein paar Dinge dazugelernt, sodass die expressions unnötig sind.
Die Anweisungen für Opera und Safari müssen auch nicht vor den anderen Browsern versteckt werden. Das CSS wird durch den Verzicht auf die Weichen bzw. Hacks valider und erzeugt weniger oder keine Parsingfehler.

Der neue verkürzte Code mit einer anderen Vorgehensweise für IE 7 und 8:

CSS-Code zentrieren - Fazit

#container {width:816px;height:720px;position:relative;
top:0px;bottom:0px;left:0px;right:0px;margin:auto;
}

html {display:table;height:100%;width:100%;}
body{display:table-cell;vertical-align:middle;height:100%;width:100%;margin:auto;}

*:first-child+html body {min-height:700px;}
*:first-child+html #container { top:50%;margin-top:-350px;}

* html body {text-align:center;}
* html body  #container {text-align:left; 
top: expression(document.body.clientHeight <700?'0px':document.body.clientHeight/2-360);

Firefox kann wieder über position zentrieren, die relative position reicht.
Mit display table kommen Safari und Opera hinzu, je nach Umsetzung auch der IE 8.
Mit IE 7 (und 8) kann die einfache Methode top:50%;margin-top:-350px; endlich ohne Risiko eingesetzt werden, da er beim body die min-height:700px; befolgt und den Inhalt nicht wegrutschen läßt.

Bleibt der IE 6. Eine expression, die horizontale Ausrichtung, wird durch text-align:center; ersetzt.
Somit bleibt erstmal nur noch eine expression für die älteren IEs 5, 55 und 6. Damit ist das Verhalten der Zentrierung für neuere Browser inklusive Explorer 7 verläßlicher.

Verzicht auf Expression

Die expression kann natürlich per JavaScript definiert werden, etwa um ein sauberes bzw. valides Stylesheet zu erhalten. Es ist aber auch noch eine andere Lösung per JavaScript möglich, sodass gar keine expressions mehr benötigt werden. Expressions belasten das System oft mehr als andere JavaScripte, der Verzicht ist also grundsätzlich ein Vorteil.


if(document.defaultCharset && !window.XMLHttpRequest && screen.availHeight >1000)
{
document.write('<body>');
document.mt = function(){
return(mt=(document.body.clientHeight < 700)?1:( document.body.clientHeight/2-360));};

document.write('<style> * html body  { margin-top:'+document.mt()+'px;}<\/style>');

window.onresize =function(){document.body.style.marginTop=document.mt()+'px';}

}

Wer bei den IEs im JavaScript ganz auf event-Handler verzichten möchte, kann die Funktion mit window.onresize einfach weglassen. Beim Seitenaufbau greift die vertikale Zentrierung immer noch. Um das Script im Head des HTML-Dokuments aufrufen zu können, wird ein body-Element erzeugt, dessen Eigenschaften anschließend im Script abgefragt werden können. Alternativ ginge die Korrektur nach/mittels window.onload, allerdings mögen dann eher Rutsch- und Positioniereffekte nach dem Seitenaufbau erkennbar sein.

Nach dem Zentrieren eines Containers in der Mitte des Viewports nun noch eine Lösung, um Bilder innerhalt eines Containers mittig auszurichten.

Img zentriert

Wieder gelingt es, mittels display:table-cell; zu positionieren. Eine Sonderbehandlung ist wieder für die Internet Explorer nötig. Eine einfache Massnahme ist hier die vorsichtige Anpassung der Schriftgröße an die Elementgröße des Containers.

<html>
<head>
<title>Zentrietes Bild</title>
<meta name="author" content="kl,pernox.de">
<style type="text/css">
#container {height:700px;width:700px;border:1px solid black; 
text-align:center;display:table-cell;vertical-align:middle;}
* html #container {font-size:631px;}
*:first-child+html #container{font-size:631px;}
img {vertical-align:middle;}
</style>
</head>
<body>
<div id="container"><img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAA1BMVEVNcKgoCnFlAAAAG0lEQVRYCe3BgQAAAADDoPlT3+AEVQEAAAB8AxBAAAHPz/iBAAAAAElFTkSuQmCC"
height="150px" width="150px"></div>
</body>
</html>