Design für Print und Web

Blockelemente horizontal und vertikal zentrieren

20.03.2007 um 15:25 Uhr
Emersacker
abgelegt unter CSS-Tipps

Emersacker. Um Blockelemente in HTML-Dokumenten horizontal zu zentrieren kann man sich bekannterweise des center-Elements bedienen; doch was tun, wenn die Seite in validem XHTML-strict codiert werden muss, oder auch vertikale Zentrierung erwünscht ist und keine Tabelle verwendet werden soll?

Mit ein klein wenig CSS-Markup lässt sich diese Aufgabe leicht bewältigen.

Sie müssen dem Element lediglich einen feste Breite und Höhe zuweisen, es relativ positionieren, und ihm als obere und seitliche Positionsangabe einen Wert von jeweils 50% geben.

Schließlich halbieren sie die Werte von Breite und Höhe und weisen sie dem Blockelement als negative Randangaben zu, wie in folgendem Beispiel:

div#container {
  width:450px;
  height:480px;
  position:relative;
  left:50%;
  top:50%;
  margin-left:-225px;
  margin-top:-240px;
  }

Diese Methode funktioniert erstaunlicherweise auch in älteren Browsern, wie dem IE5.