Seite horizontal und vertikal zentrieren mit CSS

1. Horizontales zentrieren

Die Ausgangssituation: Wir habe eine Webseite der wir eine feste Breite von 500px geben. Jetzt wollen wir natürlich das die Seite schön in der Mitte des Browsers angezeigt wird. Welche Lösung gibt es dafür?

Die Standard Antwort in den meisten Foren lautet folgendermassen: Umhülle deine Seite mit einem div, dem sogenannten wrapper, und zentriere alles mittels margin.

Klar das funktioniert, und viele Seiten sind auch so aufgebaut. Aber brauchen wir wirklich ein div? Ich möchte meine Seite mit so wenig divs wie möglich erstellen und habe nach einer anderen Möglichkeit gesucht, und die gibt es tatsächlich.

Die Antwort ist verblüffend einfach: Wir geben dem body Element eine feste Breite und zentrieren dieses mittels margin.

body {width: 500px;
      margin: 0 auto;
      background-color: #CCFECB;
      font-family: helvetica, arial, tahoma, sans-serif;
      font-size: 100.1%;
      color: #000000;}

Wichtig sind nur die ersten beiden Zeilen. In der ersten Zeile geben wir unserem body eine feste Grösse und in der zweiten Zeile zentrieren wir alles mit margin: o auto;

In diesem Beispiel hat aber die gesamte sichtbare Seite die Hintergrundfarbe des body. Wir wollten eigentlich dem Hintergrund rechts und links zur besseren Abgrenzung eine andere Hintergrundfarbe zuweisen. Wie mache ich das denn jetzt? Muss ich auf ein Div zurückgreifen?

Nein, das ist nicht nötig.

html {background-color: #CCFF99;}

body {width: 500px;
      margin: 0 auto;
      background-color: #CCFECB;
      padding: 10px;
      font-family: helvetica, arial, tahoma, sans-serif;
      font-size: 100.1%;
      color: #000000;}
      

Für den Hintergrund ausserhalb des body ist der Selektor html zuständig. Wir haben also mit dem Selektor html ausserhalb des body eine andere Hintergrundfarbe angegeben. In body haben wir noch ein padding hinzu gefügt damit der Text nicht so sehr am Rand klebt.

Zu sehen ist das Beispiel hier: Demo.

2. Vertikales zentrieren

Für das vertikale zentrieren kommen wir leider nicht mehr um die divs herum. Das ist zwar nicht 100% semantisch korrekt aber leider nicht zu ändern wenn wir den gewünschten Effekt realisieren wollen.

Der HTML Code sieht dann so aus:

<div id="abstand"></div>
<div id="content">Hier steht mein Inhalt drin</div>
    

Das erste div mit der ID abstand ist leer und dient nur als Bezugspunkt zum zentrieren. Im zweiten div mit der ID content steht dann der Inhalt drin.

Als erstes müssen wir jetzt dafür sorgen das unsere Webseite die gesamte zur Verfügung stehende Höhe einnimmt.

html, body {height: 100%;}

Jetzt definieren wir den vertikalen Abstand und zentrieren unseren Inhalt. Dazu ist es wichtig das unser div content eine feste Höhe und Breite hat. Mehr dazu weiter unten.

#abstand {height: 50%;
          margin-bottom: -14em;
          width: 1px;
          float: left;}

#content {height: 28em;
          clear: left;
          position: relative;
          width: 33em;
          margin: 0 auto;}
    

Wie man sieht haben wir unserem div abstand mit height: 50%; genau die Hälfte der zur Verfügung stehenden Höhe gegeben. Die Breite dieses divs ist unwichtig und braucht nur 1px zu betragen. margin-bottom muss genau die Hälfte von der Höhe des div content betragen. Das float: left wird benötigt damit der Inhalt bei einem zu kleinen Browserfenster nicht aus dem Browserfenster heraus wandert und damit unsichtbar wird.

Beim div content haben wir eine Höhe und eine Breite angegeben. Hier wird mit margin: 0 auto; das div content horizontal zentriert und das position: relative; dient dazu das sich das div content im Vordergrund vor dem div abstand befindet.

Hier ist wieder ein Beispiel zu sehen: Demo.