Zurück zum Blog

DIV-Container horizontal und vertikal zentrieren

Mit folgenden Code wird ein DIV-Container mit einer Breite von 800px und einer Höhe von 500px horizontal und vertikal im Browser-Fenster zentriert. Mit dem zusätzlichen Container "valign_hlp" wird das Problem gelöst, dass der obere Bereiche des Containers abgeschnitten wird, sobald sich das Browser-Fenster zu sehr verkleinert - was in Zeiten von Netbooks und Smartphones gar nicht mal so selten vorkommt.

Das HTML-Gerüst und der CSS-Code sehen wie folgt aus:

<div id="valign_hlp">
  <div id="container"><!-- Der eigentliche Inhalt der Site --></div>
</div>
HTML für horizontale und vertikale Zentrierung
#valign_hlp, #container {
	margin: 0;
	padding: 0;
	position: absolute;
}
#valign_hlp {
	width: 100%;
	height: 100%;
	min-height: 500px;
	min-width: 800px;
}
#container {
	top: 50%;
	left: 50%;
	margin: -250px 0 0 -400px;
	width: 800px;
	height: 500px;
	min-height: 500px;
}
CSS für horizontale und vertikale Zentrierung

Diesen Artikel teilen

Schreiben Sie den ersten Kommentar zu diesem Artikel

Ihr Kommentar

Bitte geben Sie Ihren Namen an
Bitte geben Sie eine E-Mail Adresse an
Bitte geben Sie eine Nachricht ein
Das Ergebnis ist nicht korrekt