div vertikal und horizontal zentrieren

Hallo!

Heute habe ich gefunden wonach ich schon lange gesucht habe - wie man ein div im Browserfenster horizontal und vertikal (!) zentriert! Ich denke das wird für einige hier sehr nützlich sein, das funktioniert auch, und ich habe noch eine Frage dazu.

Zuerst Code:

Und meine Frage:
ich hab's früher auch sehr häufig gesehen, nicht nur hier, auch zu den anderen verschiedensten Anlässen, die Minuswerte

Erklärt mir, bitte, oder gibt ein Link, was passiert bei diesen Minuswerten, was bewirken die, was möchte man dadurch erziehlen?

Danke!
PS. Cool, das war mein 100. Beitrag

Und das nach exakt einem Jahr!

Also, mit einem Top/left von 50% zentrierst du das ganze. Danach gehst du mit den negativen Margins wieder die halbe breite/höhe des Divs rückwärts. Ansonsten hättest du "nur" die obere, linke Ecke zentriert..

Ich bezweifle aber dass der Code in allen Browsern sauber interbretiert wird..

Hallo,

hab vor einigen Tagen auf selfHTML noch gelesen, dass die CSS Eigenschaften wie "Top" vom IE nicht interpretiert werden (also komplett ignoriert).
Ob das für den IE7 nicht zutrifft weiß ich nicht, aber aufgrund der Tatsache das in absehbarer Zeit noch viele mit dem IE6 unterwegs sein werden sollte man diese Problematik nicht vergessen...

Hallo,
das Script funktioniert mit allen Browsern außer IE 5(mac) und Netscape Naviagtor 4.
Quelle: css-buch
mfg

Vielen Dank für die Antworten, aber leider habe ich das doch nicht verstanden...

Könnt Ihr vielleicht diesen Satz irgendwie anders erklären? Ist das irgendwo beschrieben? Wie wirken die Minuswerte auf den Browser überhaupt aus , oder wie wird es durch den Browser genau interpretiert und ausgeführt?

Hallo,
mit den Angaben
top:50%;
left:50%;
position:absolute;
Positionierts Du den DIV Container besser gesagt die Linke obere Ecke in der Mitte des Bildschirms,
dann wird mit mit einem
margin-top:-100px;
marign-left:-200px;
die Linke obere Ecke ,die ja in der mitte des Bildschrims liegt in die Richtungen verschoben um die hälfte deines DIVs.
Man muß die Linke Obere Ecke immer als NULL Punkt sehen von jedem Fenster und auch DIV Container .
Minus Werte haben keine großen Auswirkungen mann kann so auch Rollover Buttons erzeugen die schneller sind als ein neues Bild zu laden (so mal am Rande erwähnt).

Zusammen gefasst heißt das das DU deine Linke obere Ecke deines DIVs mit der absoluten positionierung in die mitte des Bildschirms legst und dann per margin die Linke Obere Ecke soweit verschiebst das der mittelpunkt deines DIVS auch in der mitte des Bildschrims ist.

Sooooooo, ich glaub dass ich endlich verstanden habe (weil es mir peinlich war zum x-ten Mal nicht zu verstehen )
Was ich früher nicht verstand, war, dass man mittels

nur die linke obere Ecke im Zentrum des Bildschirms positioniert, und das braucht man gar nicht, man braucht die Mitte des divs in der Mitte des Bildschirms!

Und das macht man indem man verschiebt, das ist ein Schlüsselwort hier, jetzt verstehe ich dass Minuswerte in margin nicht wegrücken, wie immer, sondern annähern, stimmt's?

Bedanke mich vielmals dass ich doch ein wenig klüger geworden bin!

Danke für den Code, nach so etwas habe ich schon auch ewig und 3 Tage gesucht

Ist tatsächlich die sauberste und meist kompatible Lösung für die vertikale Zentrierung von DIV-Containern.

Ist zwar schon ein bisschen her, dass das Thema diskutiert wurde, aber ich habe dabei folgendes Problem:
Mein div ist ~1000x600px groß. wenn ich versuche, es mit dem vorgeschlagenen Code zu zentrieren,
wird es bei kleineren auflösungen einfach oben abgeschnitten. Man kann also noch zum unteren
Rand des divs scrollen, der obere verschwindet aber. gibts da irgend eine lösung?

Wenn Du den Code in diesem Beitrag

http://www.ayom.com/topic-16647.html#entry107301

meinst, dann hast Du sicher irgendetwas übersehen. Zeig deinen Code damit man dir helfen kann.

Ich habe das gleiche Problem wie Soulrender
bei einer geringeren Auflösung schneidet es mir den oberen Rand ab :-(

Der Code:
html, body{
margin-top: 0px;
margin-left: 0px;;
margin-right: 0px;
margin-bottom: 0px;
font-family: "Arial", sans-serif;
font-size: 12px;
line-height: 16px;
height: 100%;
background-color: white;
background-image: url("pics/bg.png");
background-repeat: repeat-y;

}
#bgmain{
position: absolute;
height:775px;
width:1076px;
margin:-387px 0px 0px 0px;
top: 50%;
left: 100px;
background-image: url("pics/bg_main.png");


}

Das Problem entsteht, wenn 50% weniger als 387px sind. Für eine Lösung müsste wahrscheinlich mit einem weiteren Div oder so gearbeitet werden. Muss noch ein bisschen Nachdenken.

und hier kommt schon die Lösung:

html, body {
margin:0;
padding:0;
height:100%;
}

body {
font-family: "Arial", sans-serif;
font-size: 12px;
line-height: 16px;
height: 100%;
background-color: white;
background-image: url("pics/bg.png");
background-repeat: repeat-y;
}

#distance {
width:1px;
height:50%;
margin-bottom:-387px; /* Hälfte der Containerhöhe */
float:left;
}

#bgmain {
margin:0 auto;
position:relative; /* Setzt den Container in den Vordergrund des distance */
text-align:left;
height:775px;
width:1076px;
clear:left;
background-image: url("pics/bg_main.png");
}