Zentriert Ohne Tricks HTML-Objekt nur mit CSS horizontal und vertikal zentrieren

Die Google-Suchanfrage “HTML Objekt zentrieren” bietet einem unendlich viele Möglichkeiten, ein oder mehrere HTML-Elemente zentriert darzustellen. Darunter finden sich die umständlichsten CSS-Hacks, ausufernde JavaScript-Lösungen oder dubiose und nicht ausgereifte “Lösungen” der Marke Eigenbau.

Doch auf der Website von ohne-css.gehts-gar.net fand ich eine einfache Möglichkeit, ein HTML-Element nur mittels HTML und CSS zu zentrieren. Das Element passt sich dann auch dymanisch Größenveränderungen des Browserfensters an und funktioniert in allen aktuellen Browsern, den Internet Explorer 6 mit eingeschlossen.

Der Aufbau im Code kann einfacher gar nicht sein; es wird ein zu zentrierendes HTML-Objekt sowie ein kleines Hilfs-DIV benötigt:

HTML-Code

<div id="distance"></div>
<div id="shell"></div>

Diese beiden Elemente müssen mit folgenden Styles angesprochen werden, um dein DIV in einer HTML-Datei letztendlich perfekt zentriert darzustellen. Dabei muss beachtet werden, dass das margin-bottom des #distance-Elements die Hälfte der Höhe des zu zentrierenden Elements beträgt, allerdings im negativen Bereich:

CSS-Code

#distance {
  width: 1px;
  height: 50%;
  float: left;
  margin-bottom: -240px /* Muss die Hälfte der Höhe des zu zentrierenden Objekts sein, in diesem Fall 480px durch 2 */
}

#shell {
  clear: left;
  width: 640px;
  height: 480px;
  margin: 0 auto;
  position: relative
}

Das war es dann auch schon. Mit Hilfe der kleinen, unauffälligen #distance-Ebene wird das nächstliegende Objekt – die #shell-Ebene dynamisch im Browserfenster zentriert. Wenig Aufwand, große Wirkung – so lieben es Webdesigner!

Beispiel-HTML-Datei samt CSS herunterladen ( 2 KB )

Eine ausführlichere Erklärung findest du auf der Website von www.ohne-css.gehts-gar.net.