Div-Box in der Mitte des Fensters

Wenn ein Login-Fenster oder eine Grafik schön in der Mitte des Bildschirms zentriert ist, macht das immer wieder einen guten Eindruck. Doch wie macht man das mit CSS und dann noch so, dass es unabhängig von der Fenstergrösse bzw. Bildschirmauflösung ist?
Dazu gibt es folgende Möglichkeit:

Die div-Box:
<div id="box">...</div>
Und der dazu gehörende CSS-Code:
<style type="text/css">
#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;
}
</style>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.