Zentriertes Layout mit CSS

Kleiner Trick, einen Div-Layer in einem Browserfenster zu zentrieren.

Wurde im letzten Monat mehrmals gefragt, wie man einen Div-Layer zentriert. Hier mal kurz die Methode, die ich meistens anwende:

Ihr bestimmt die Größe des Layers in Pixeln und eine absolute Positionierung.

 

div {
position: absolute;
width: 600px;
height: 400px;
}

 

Dann ergänzt ihr die Definition um die top und left Angaben. Und zwar beides mit 50%.

 

div {
position: absolute;
width: 600px;
height: 400px;
top: 50%;
left: 50%;
}

 

Jetzt ist der obere linke Punkt des Div Layers genau mittig. Um jetzt den Mittelpunkt des Layers zu zentrieren und nicht den oberen linken, müsst ihr nur noch mit margin-left und margin-top das ganze Konstrukt wieder um seine halbe Höhe und seine halbe Breite zurückziehen. Das sieht dann so aus

 

div {
position: absolute;
width: 600px;
height: 400px;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -200px;
}

 

Jetzt ist der Layer zentriert unabhängig davon auf welcher Auflösung ihr die Seite anschaut, oder wie groß das Browserfenster ist. Achtung: auf sehr kleinen Displays, z.B. bei Handhelds oder Handys funktioniert das ganze nicht mehr so einfach. Sobald das Anzeigefenster kleiner ist als die Dimension des Div-Layers, wird der Layer durch die Margin Angabe über den linken Rand hinausgeschoben und evtl ist ein Teil des Inhalts dann nicht mehr sichtbar... Es gilt also wie immer: Weise und vorsichtig anwenden :)