Witam,

Chcę wyświetlać zdjęcie z galerii na tle przyciemnionej strony, czyli coś w stylu lightbox`a.
Nie chcę korzystać z rozwiązań gotowych, tylko spróbować napisać coś własnego.

O to co wymyśliłem:

[HTML] pobierz, plaintext 
<div id="box" style="height:100%;width:100%;position:absolute;left:0;top:0;margin:auto;">    
 
    <div id="content" style="width:300px;height:300px;background-color:#ffffff;position:absolute;left:50%;top:50%;margin-left:auto;margin-right:auto">  
     Tutaj właściwy tekst albo zdjęcie     
    </div>   
 
    <div id="background" style="width:100%;height:100%;background-color:#000000;filter: Alpha(Opacity=80, Style=0);-moz-opacity:0.8;opacity:0.8;">
     <!--TO JEST WARSTWA PRZYCIEMNIAJĄCA STRONĘ-->
    </div>
 
   </div>
[HTML] pobierz, plaintext 

DIV box rozciąga się na całą stronę.
DIV content zawiera zdjęcie
DIV background znajduje się pod DIV`em content i przyciemnia stronę

Problem mam z wyśrodkowaniem DIV`a content. Chcę go mieć centralnie na środku strony (niezależnie od rozdzielczości) i w obecnej postaci pozycjonowany (left: 50%; right:50%) jest jego lewy, górny wierzchołek, a nie całość.

Ktoś ma jakiś pomysł, a może inaczej skonstruować ten szablon?

Pozdrawiam

Nadaj ujemne marginesy (górny i lewy) na połowę wysokości i szerokości centrowanego diva, jeśli koniecznie chcesz robić to na pozycjonowaniu absolutnym.

Twój sposób działa w poziomie, natomiast w pionie pozycjonowany div do połowy wchodzi pod górną krawędź okna.



No właśnie koniecznie nie, to było pierwsze o czym pomyślałem, ciekaw jestem Waszych rozwiązań...

To znaczy, że coś jest nie tak z marginesami. Na każdej przeglądarce tak działa?

jeśli chodzi ogólnie o centrowanie polecam fajny link wszystko co chcesz wiedzieć o centrowaniu w css a dokładniej przykład z końca artykułu ze "sztuczkami" dla opornego IE

Już jest ok, nie było top:50% przy position.
Dzięki za pomoc i za linki, na pewno przydadzą się.

Pozdrawiam