Div-Elemente zentrieren ("margin" nur in Opera?)

[Der Martin]

Hallo,

Ich möchte gerne einen <div>-Bereich exakt in der Mitte des Bildschirms anzeigen lassen. Aber so ganz will mir das nicht gelingen.

das würde mich auch sehr wundern; denn bestenfalls bekommst du es in die Mitte des Browserfensters, aber nicht des Bildschirms.

#div_home { position:fixed; margin: 0 auto; width:640px; }

Da hast du leider zwei Angaben, die sich nicht vertragen.

Die einzige Möglichkeit ein Element selbst zu zentrieren die ich gefunden habe, ist "margin: 0 auto;". Das funktioniert natürlich nicht, da diese Methode nur mit dem Opera kompatibel ist.

Huch! Wer sagt denn sowas? - Nein, das ist schon die allgemein übliche Methode, die so ziemlich in jedem Browser funktioniert. Nur eben nicht bei positionierten Elementen, da diese aus dem normalen Elementfluss herausgelöst sind und sich nicht mehr an den Abmessungen ihrer Vorfahren- oder Geschwisterelemente orientieren. Daher wird margin: 0 auto; bei dieser Konstellation als margin: 0 0; interpretiert.

Wenn du also position:fixed verwendest, musst du auch die Position des Elements exakt angeben. Eine Möglichkeit wäre in deinem Fall:

left: 50%; margin-left: -320px;

Mit left: 50%; wird zunächst die Kante des Elements exakt in die Fenstermitte gerückt, und dann mit einem negativen Margin um genau die halbe Breite des Elements korrigiert.

Einen hässlichen Nebeneffekt hat das Ganze: Wird das Fenster schmaler als das positionierte Element, dann ist es nicht mehr druch Scrollen erreichbar. Aber diese Gefahr besteht bei der Verwendung von position: fixed; sowieso schon ...

Ciao,
 Martin