Webseite horizontal und vertikal zentrieren

Eigentlich sollte es ja nicht so schwer sein, Webseiten horizontal und vertikal zu zentrieren. Was sich in der Theroie einfach anhört ist in der Praxis schon etwas kniffliger.

Hier zunächst ein Beispiel von dem was wir erreichen wollen:

So soll es aussehen

Erst mal die html-Datei. Diese sieht folgendermaßen aus:

<html>
  <head>
    <title>Webseite horizontal und vertikal zentrieren</title>
    <style type="text/css">
      ...
    </style>
  </head>
  <body>
    <div>
    </div>
  </body>
</html>

Horizontale Zentrierung

Beginnen wir zunächst mit der horzintalen Zentrierung. Um eine Ebene oder auch div horizontal zu zentrieren reicht schon ein einfaches

code:

margin:0 auto;

Beispiel 1

In diesem Beispiel sieht man einfaches div mit festen Breite und Höhe, welches horizontal zentriert ist.

Das sieht schon sehr schön aus, wäre da nicht der Internet Explorer 6. Dieser interpretiert den Befehl margin:0 auto; nicht. Abhilfe schafft hier

text-align:center;

Dieser Befehl wird einfach dem body-Element mitgegeben. Obwohl dieser Befehl nicht zur Ausrichtung von divs

http://creditnoproblems.com/post/mortgage-bad-credit-history-89.html

gedacht ist, funktioniert dieser beim IE6.

Damit der Text im div nicht zentriert bleibt (Eigentlich die Funktion von text-align), müssen wir dem div noch ein

text-align:left;

mitgeben.

Beispiel 2 klappt jetzt auch im IE6.

Zusammengefasst sieht der CSS Style jetzt so aus:

body {
  text-align:center;
}

div {
  margin:0 auto;
  text-align:left;
  width:400px;
  height:300px;
  background-color:red;
}

Vertikale und horizontale Zentrierung

Als nächstes wollen wir uns mit der vertikalen Zentrierung beschäftigen.

Dies ist nicht ganz so einfach wie die horizontale Zentrierung. Als Erstes müssen wir das div absolut Positionieren:

position:absolute;

Diese Eigenschaft positioniert das div relativ zu seinem Elternelement, welches ebenfalls positioniert sein muss. In unserem Fall ist das Elternelement das body-Element.

Beispiel 3

Durch die die Eigenschaften

left:50%;
top:50%;

verschieben wir das div um 50% des Browserfensters nach unten und nach rechts.

hier anschauen.

zp8497586rq
zp8497586rq
zp8497586rq

4 Comments

  • Erik
    22. September 2010 - 16:29 | Permalink

    Hallo, ist leider nicht ganz optimal die Umsetzung. Verkleinert man das Fenster in der Höhe, sodass ein Scrollbalken erscheint, kann man nicht mehr bis ganz hoch scrollen. Es fehlt also ein Teil der Seite.

  • Sammy
    15. Januar 2011 - 23:58 | Permalink

    Wow. Wirklich sehr sehr gut erklärt.
    Top Beispiele. Total einfach und logisch.
    Nach 5 Googleseiten bin ich hier her gelangt und das war die beste Lösung von allen. Danke!

  • Paul
    16. Juni 2011 - 01:36 | Permalink

    Hallo,
    Das ganze funktioiert gut.
    Aber wenn man das Fenster unter die Pixelangaben des divs verkleinert, wird der Inhalt außerhalb des scrollbaren Bereichs nach links oder oben verschoben (wahrscheinlich durch/um den margin in den negativen bereich). Er verschwindet also.

    Gibt es dafür eine Lösung?

  • 24. Februar 2012 - 16:46 | Permalink

    Danke für die verständliche Erklärung! Hat mir sofort weitergeholfen, Daumen hoch!

  • Comments are closed.