Man kann sonst auch ein wenig schummeln, damit es auf allen Browsern funktioniert.
Das Element
Code:
<div id="MyElement" style="width: 200px; height: 100px;">
</div>
Body Onload:
Code:
<body onLoad="centerElement('MyElement');">
JavaScript
:
Code:
function centerElement(e)
{
e = document.getElementById(e);
var ex, ey, wx, wy, sx, sy;
ex = parseInt(e.style.width);
ey = parseInt(e.style.height);
/* --- Inner Width/Height --- */
if (self.innerHeight)
{
wx = self.innerWidth;
wy = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
{
wx = document.documentElement.clientWidth;
wy = document.documentElement.clientHeight;
}
else if (document.body)
{
wx = document.body.clientWidth;
wy = document.body.clientHeight;
}
/* --- Scrolling offset --- */
if (self.pageYOffset)
{
sx = self.pageXOffset;
sy = self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop)
{
sx = document.documentElement.scrollLeft;
sy = document.documentElement.scrollTop;
}
else if (document.body)
{
sx = document.body.scrollLeft;
sy = document.body.scrollTop;
}
e.style.left = (((wx / 2) - (ex / 2)) + sx) + 'px';
e.style.top = (((wy / 2) - (ey / 2)) + sy) + 'px';
}
Diese Methode funktioniert übrigens auch, wenn man schon ein Stück runter gescrollt hat.
Man kann also die Funktion auch später aufrufen (beim Einblenden vom Element) und das Element wird trotzdem an der richtigen Stelle zentriert gesetzt
Edit: Wichtig ist nur, dass das Element eine absolute Größenangabe hat.