Kategorien
Technik

div Layout zentrieren

Um ein Layout mit einer fixen Breite in einem Browserfenster zu zentrieren gibt es zwei Möglichkeiten.
Bei der ersten Methode wird das Layout auf eine Basisbox aufgebaut, die mit den CSS-Eigenschaften position, margin-left, margin-top und left, top versehen wird. Um nun die Basisbox zu zentrieren, werden diese Werte wie folgt verwendet. Ich setze die Basisbox auf eine feste Breite sowie die CSS-Eigenschaft top und left auf 50%. Die Box richtet sich nun um diese Koordinaten aus, da ich aber noch nicht die Breite mit berechnet habe, ist die Basisbox jetzt zu weit rechts, da immer von der oberen, linken Ecke berechnet wird. Um nun die Box korrekt auszurichten teile die Breite der Basisbox durch 2 und setze diesen Wert als negativen Wert in die CSS Eigenschaft margin-left ein.

Methode 1

#basisbox{
 width:900px;
 position:absolute;
 left:50%;
 margin-left:-450px;
}

Methode 2

Bei dieser Methode nutze ich die auto Funktion des Browsers zum Positionieren. Die Basisbox benötigt eine feste Breite um ein korrekte Positionierung durchzuführen. Durch die CSS-Eigenschaft margin:auto auto, richtet sich die Basisbox automatisch zentriert im Doukment aus.

#basisbox{
 position:relative;
 width:900px:
 margin:auto auto;
}