theiNaD

Kategorie:CSS

Div vertikal und horizontal zentrieren

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

Transparenz mit CSS

Ihr wollt etwas Transparenz für eure Website benutzen? Zum Beispiel um ein Bild leicht durchsichtig zu machen, oder sogar Divs und andere Elemente.
Das geht ganz einfach über Styles bzw. die CSS, indem ihr diese drei Dinge für das jeweilige Element eintragt, entweder im Style Tag oder in der CSS Datei.
Mehr lesen »

Copyright © 2017 theiNaD

Design von Anders NorenHoch ↑