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

[Rot-Fuxs]

Einen wunderschönen Samstag wünsche ich allerseits!

Ich möchte gerne einen <div>-Bereich exakt in der Mitte des Bildschirms anzeigen lassen. Aber so ganz will mir das nicht gelingen.
Das Div-Element wird momentan folgendermaßen formatiert:

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

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. *grübel* Aber WARUM?

margin-left, margin-right, margin-top, margin-bottom, sie alle sind scheinbar absolut gägnig. Aber warum dann "nur"-margin nicht? O.o

Gut abgesehen von diesem für mich völlig unverständlichem Paradoxum, gibt es denn noch andere möglichkeiten einen Bereich zu zentrieren? oder bleibt mir nichts anderes übrig, als den Bereich mit Pixel- / Prozentangaben zu beeinflussen?

Gruß,
Rot-Fuxs

[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

[Rot-Fuxs]

Ach wie doof. Natürlich! Diese Methode habe ich sogar selbst schon mal verwendet. *an den kopf fass*

Also manchmal hat man einfach ein brett vor dem Kopf.
Vielen Dank für die schnelle und gute Antwort! ^_^

Gruß
Rot-Fuxs

PS:

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?

Das stand in irgendeinem SELFHTML-Artikel. Aber jetzt finde ich ihn nicht mehr wieder. -_-