CSS Image Viewer - Align centre of the screen

I want to use the below image enlarger/viewer but i would like the popup of the enlarged ima开发者_JAVA百科ge to appear on the center of the screen.

http://www.dynamicdrive.com/style/csslibrary/item/css_smart_image_enlarger/

I tried many ways but was unsuccessful....

Any help on this would be much appreciated.

---

To solve these issues I usually query the DOM with JavaScript to find out the size of the window. I then use:

document.getElementById('popup').style.top = window_height - popup_height / 2;
document.getElementById('popup').style.left = window_width - popup_width / 2;

The positioning of the popup must be set to 'absolute' in the CSS. To get height (same for width) I use:

if (document.body.clientHeight) {
    window_height = document.body.clientHeight;
} else {
    window_height = window.innerHeight;
}

If your div doesn't have an id you can still pass the object reference to the JavaScript function like:

<div class='popup' onmouseover='javascript:openPopup(this);'> ... </div>

And, in a nearby piece of code:

function openPopup(element) {

    // Get window's height and width using the code above

    element.style.top  = window_height - popup_height / 2;
    element.style.left = window_width - popup_width / 2;

}

That is, instead of querying the DOM to get the object by the ID, you directly pass the object to the JavaScript function.

---

You could do like this if you got a fixed with..

.popup { position: absolute; width: 140px; margin-left: -70px; top: 0px; left: 50%; }