Wyśrodkowanie diva w pionie i poziomie

Od kiedy robienie stron na tabelkach stało się pewnego rodzaju faut-pas, webmasterzy zaczęli odczuwać pewne nie comme il fau... Tabelki pozwalały się rozciągać w dowolnym kierunku, nie robiły żadnych niespodzianek, a zrobione na nich strony wyglądały świetnie. Dziś, w epoce XHTM i CSS też chcemy, żeby nasze strony wyglądały świetnie... albo przynajmniej podobnie jak w założeniach graficznego projektu.

Ostatnio spotkałem się z problemem umieszczenia na środku strony kontenera DIV o zadanych wymiarach, który niezależnie od rozdzielczości zachowałby swoje centralne położenie. Rozwiązanie, które znalazłem nie jest moje, znalazłem je po długich poszukiwaniach na którymś z forów.

Oto nasze założenie:






W różnych rozdzielczościach kontener DIV wyświetla się na środku w pionie i poziomie.

Nie będę pisał co próbowałem zrobić, żeby uzyskać ten efekt, ale wyczyniałem różne dziwne kombinacje. A wystarczy posłużyć się takim oto kodem:

Plik HTML

   


      


       Treść strony

       

   

PLIK CSS

div#main, div#kontener

{

width:800px;

height:600px;

}



div#main

{

position:absolute;

top:50%; left:50% ;

/* szerokosc main i kontenera dzielona na 2*/

margin-left:-400px;

/* wysokosc mian i kontenera dzielona na 2*/

margin-top: -300px;

}