<div> mittig zentrieren – DevOps Blog noll.nrw

So ziemlich jeder HTML-Entwickler stand schon einmal vor demselben Problem: Wie zentriert man ein <div> oder anderes Block-Element genau mittig auf der Seite?

Erstellen wir uns erst einmal ein HTML Grundgerüst:

View Code XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Zentriertes Div</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	</head>
	<body>
		<div class="centered">
			<p>Text, der genau in der Mitte der Seite platziert ist.</p>
		</div>
	</body>
</html>

Jetzt brauchen wir noch ein wenig CSS und schon sind wir fertig:

View Code CSS

.centered {
	position: absolute;
	width: 512px;
	height: 100px;
	top: 50%;
	left: 50%;
	margin-left: -256px;
	margin-top: -50px;
	border: 1px solid #000000;
	background-color: #eeeeee;
}
.centered p {
	text-align: center;
}

Der interessante Teil ist das „margin-left: -256px;“ bzw. das „margin-top: -50px;„, denn ohne die negativen Margin-Werte, würde das Zentrieren nicht funktionieren.
Achtung: Wenn sich die Breite oder die Höhe des Div-Containers ändert, müssen die Margin-Werte ebenfalls angepasst werden. Die Margin-Werte ergeben sich immer aus Breite/2 bzw. Höhe/2. Würden wir die Breite z.B. auf 200px reduzieren, muss das margin-left mit -100px angegeben werden.

3 Kommentare zu “<div> mittig zentrieren”

Probiere es doch mal mit „margin:auto;“, dann funktioniert das auch mit anderen Aulösungen als 1024er Breite und du musst nichts mehr anpassen.

@Daniel:
Die hier aufgezeigte Methode funktioniert unter allen Auflösung und positioniert das div immer mittig (sowohl vertikal als auch horizontal). Hab ich extra ausprobiert… Danke an den Autor für den Tipp!

„margin:auto“ dagegen zentriert das div nur horizontal. Vertikal bleibt es oben auf der Seite stehen. Und wenn man das div absolut positionieren will, hat „margin:auto“ gar keine Wirkung…

Die hier beschriebene Methode funktioniert afaik nur so lange, wie das Browserfenster groß genug ist, um den Div-Container anzuzeigen. Wenn es kleiner ist, bleibt der Container zentriert und ragt rechts und links aus dem Browserfenster hinaus. Die rechte Seite ist nicht so schlimm, dafür erscheint ein horizontaler Scrollbar, aber auf die linke Seite ist gar kein Zugriff mehr möglich.
Ich bevorzuge auch die margin:auto-Methode.

BTW: Schöner Blog mit reichlich fundiertem Know-How, ich bin begeistert!

3 Kommentare zu “<div> mittig zentrieren”

Schreibe einen Kommentar