[JavaScript] Centrowanie DIVa na ekranie

[youlleck]

Mam na stronie takiego DIVa:

Kod: Zaznacz cały

<div id=win></div>

Domyślnie nie ma on żadnej zawartości, dopiero po kliknięciu odpowiedniego przycisku jego zawartość jest pobierana AJAXem. W zależności od rodzaju zawartości DIV przybiera różny rozmiar.

Potrzebuję w prosty sposób wycentrować tego DIVa na ekranie przy pomocy JavaScriptu.
Próbowałem różnych rzeczy w stylu:

Kod: Zaznacz cały

var object=document.getElementById('win');
object.style.marginLeft = (screen.Width - parseInt(object.offsetWidth))/2 + "px";
object.style.marginTop = (screen.Height - parseInt(object.offsetHeight))/2 + "px";

ale niestety bez efektów

[kabanek]

a nie prościej byłoby za pomocą css?
Ewentualnie możesz dynamicznie dopisać klasę, dzięki której wycentrujesz tego DIVa

[mikolajs]

Trzeba ustawić margin auto i ewentualnie text-align center (to drugie w rodzicu, a pierwsze nie pamiętam, ale chyba w samym elemencie)

[youlleck]

Częściowo CSSem, częściowo JavaScriptem i jest (prawie) dobrze.

Kod: Zaznacz cały

div#win { overflow: auto; max-width: 900px; margin-left: auto; margin-right: auto; position: absolute; }

Po wczytaniu strony wywołuję taką funkcję:

Kod: Zaznacz cały

function wincenter()
{
	var win=document.getElementById('win');
	var h=window.innerHeight-100;
	win.style.maxHeight=h+"px";	
}

Dzięki temu mam DIVa o max-width 900px, max-height ustawiam dynamicznie w zależności od wysokości obszaru roboczego przeglądarki. Jeżeli zawartość okna pozwala na rozszerzenie DIVa do 900px, można rzec, że jest wycentrowany. Inaczej sprawa się ma, kiedy ma mniejszą szerokość - wtedy zawsze prawy margines jest większy.

Ponadto, będę musiał go jakoś dynamicznie pozycjonować, bo jak przycisk do wczytywania zawartości jest gdzieś na dole strony, tak że wymaga jej przewinięcia, DIV pokazuje się na górze strony. Rozwiązaniem jest przewinięcie strony do góry (kiepskim), lub przeniesienie DIVa w odpowiednie miejsce na stronie.

Jak będę miał siłę i wenę to dojdę do tego jak to zrobić i wtedy podkręcę rozwiązanie.


Edit:

Dodałem jeszcze funkcję:

Kod: Zaznacz cały

function centerWin()
{
	var win=document.getElementById('win');
	var maxH=window.innerHeight-100;
	var posX=(window.innerWidth-900)/2;
	var posY=window.pageYOffset+50;
	posX+='px';
	posY+='px';
	win.style.maxHeight=maxH+"px";
	win.style.top=posY;
	win.style.left=posX;	
	win.style.display="block";
	win.style.border="1px solid gray";
}

którą wywołuję po każdym wczytaniu zawartości DIVa. Jest już całkiem nieźle