iNaD

Als ich heute vor dem Problem stand, wie ich nun einen Div-Container sowohl vertikal als auch horizontal positionieren soll, bin ich nach vielem Überlegen auf folgende Lösung gekommen, welche auch im IE (zumindest im 9er) funktioniert:

#centered {
	width: 400px;
	height: 200px;
	text-align: center;
	border: 1px solid #666;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -100px;
}

Wie man vielleicht erkennen kann, habe ich eine ID namens centered definiert, welche eine absolute Position besitzt und auch eine feste Breite und Höhe hat. Dies ist Voraussetzung, da sonst (zumindest ohne Javascript) der Container nicht zentriert werden kann.
Um die Box sichtbar zu machen, habe ich einen Rahmen eingefügt, welcher aber nicht weiter von Relevanz ist.
Nun kommen wir zum Kernpunkt der Problemlösung. Mit left und top wird der Container um 50% vom Rand “weggeschoben”. Da der Container aber eine eigene Breite und Höhe besitzt, muss dies ausgeglichen werden, da sonst nur die Ecke oben links in der absoluten Mitte ist. Deshalb verschiebt man ihn um die Hälfte der Breite und um die Hälfte der Höhe nach links und oben.
Und schon ist der Container zentriert.

Demo: Horizontal & vertikal zentrierter Div