Elemente auf Seitenmitte

HTML, Tutorials     Div, Html, Layout

Ein gut behütetes Geheimnis ist es, so musste ich feststellen, wie man ein Element, in meinem Beispiel ein DIV, in der Seitenmitte zentriert. Es sollte nicht nur auf der horizontalen Vertikal zentriert sein, sondern auch in der horizontalen. Egal wen man befragte bekam man nie eine klare Aussage. Im Internet merkwürdigerweise findet man in den Top Google Funden nur Tabellen-Layouts. Diese anzuwenden stand für mich außer Frage, da sie einfach nicht mit der Zeit gehen und die Tabellen missbrauchen für etwas für das sie nicht sind. Auf meiner Suche also fand ich Hinweise, die mich dann letztendlich zum Ziel führten.

Als erstes versuchte ich es mit dem einfachen:

div.center-layer {
position: absolute;
top: 50%;
left: 50%;
}

Mit diesem erreichte ich schon einmal ein beginnendes DIV in der Mitte der Seite. Natürlich ging es viel zu weit herab und viel zu weit nach rechts. Nur die Ecke links-oben lag mittig. Nun fand ich im Internet einen Trick, der mir bisher unbekannt war. Negative Margins. Mit diesen habe ich noch nie zu tun gehabt und doch erschien es sofort logisch. Wichtig dabei ist, dass es wohl in einigen Browsern nicht so recht funktioniert. Ich habe es nicht getestet, aber wahrscheinlich geht es dabei um den Internet Explorer 6. Mein Versuch fand im Chrome 10 und im Firefox 4 statt.

Um zurück zu kommen. Ich habe also ein einfaches DIV von 300×300 Pixel erstellt und es zentral ausgerichtet. Der Code ist dabei recht simpel, wenn ich Anfangs auch an kompliziertere Konstrukte dachte. Das einzige worauf man noch achten muss ist, dass der negative Margin genau der Hälfte des eigentlichen DIVs beträgt.

div.center-layer {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
margin-left: -150px;
margin-top: -150px;
}

Eines habe ich bei der Suche nach dieser Lösung gelernt: Das Internet bietet nicht immer eine schnelle Antwort.