Box in der Mitte des Fensters

Wenn ein Login-Fenster oder eine Grafik auf einer Webseite schön in der Mitte des Bildschirms horizontal und vertikal zentriert ist, macht das immer wieder einen guten Eindruck. Doch wie macht man das mit HTML und CSS und dann noch so, dass es unabhängig von der Fenstergrösse und Bildschirmauflösung ist?

Dazu gibt es folgende Möglichkeit:

Wir erstellen eine div-Box, die wir zentrieren wollen:

<div id="box"> ... </div>

Dann wenden wir folgendes CSS auf das Element an:

#box {
  height: 200px; /* Höhe der div-Box */
  width: 300px; /* Breite der div-Box */
  margin-top: -100px; /* Damit der "Ausrichtungspunkt" in der Mitte der Box liegt */
  margin-left: -150px;
  position: absolute; /* positionieren */
  top: 50%; /* in die Mitte verschieben */
  left: 50%;
 
  /* weitere Angaben */
  background-color: #090;
  border: 2px solid #fc0;
}

Das margin-top bzw. margin-left beinhaltet die Hälfte der Höhe bzw. Breite der Box mit negativem Vorzeichen.

Dieses Beispiel erzeugt eine 300 mal 200 Pixel grosse, grüne, gelb umrandete Box in der Mitte des Fensters, und das ganz ohne Javascript. Wie das dann aussieht kann man in dieser Vorschau sehen.