Div-Box in der Mitte des Fensters

September 2009

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.
 
CSS


Andere Einträge


Kommentare

#1
von ewald am 04.06.2012
hier meine Erweiterung für 960 gs

.absolute_1{
position: absolute;
left: 50%;
margin: 0px auto 0px -470px;
z-index: 121;
width: 940px;
}
.absolute_2{
position: absolute;
left: 50%;
margin: 0px auto 0px -400px;
z-index: 120;
width: 860px;
}
.absolute_3{
position: absolute;
left: 50%;
margin: 0px auto 0px -310px;
z-index: 119;
width: 780px;
}
.absolute_4{
position: absolute;
left: 50%;
margin: 0px auto 0px -230px;
z-index: 118;
width: 700px;
}
.absolute_5{
position: absolute;
left: 50%;
margin: 0px auto 0px -150px;
z-index: 117;
width: 620px;
}
.absolute_6{
position: absolute;
left: 50%;
margin: 0px auto 0px -70px;
z-index: 116;
width: 540px;
}
.absolute_7{
position: absolute;
left: 50%;
margin: 0px auto 0px 10px;
z-index: 115;
width: 460px;;
}
.absolute_8{
position: absolute;
left: 50%;
margin: 0px auto 0px 90px;
z-index: 114;
width: 380px;
}
.absolute_9{
position: absolute;
left: 50%;
margin: 0px auto 0px 170px;
z-index: 113;
width: 300px;
}
.absolute_10{
position: absolute;
left: 50%;
margin: 0px auto 0px 250px;
z-index: 112;
width: 220px;
}
.absolute_11{
position: absolute;
left: 50%;
margin: 0px auto 0px 330px;
z-index: 111;
width: 140px;
}
.absolute_12{
position: absolute;
left: 50%;
margin: 0px auto 0px 400px;
z-index: 110;
width: 60px;
}

z-index und width sind optional

have a lot of fun :)

ps. deine Browserstatistik ist super !!!