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%; }