css - CSS Image Viewer - 对齐屏幕中心

Question

我想使用下面的图像放大/查看器，但我希望放大图像的弹出窗口出现在屏幕中央。

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

我尝试了很多方法，但都没有成功......

对此的任何帮助将不胜感激。

Answer 1

为了解决这些问题，我通常使用 JavaScript 查询 DOM 以找出窗口的大小。然后我使用：

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

弹出窗口的位置必须在 CSS 中设置为“绝对”。要获得高度（宽度相同），我使用：

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

如果您的 div 没有 id，您仍然可以将对象引用传递给 JavaScript 函数，例如：

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

而且，在附近的一段代码中：

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;

}

也就是说，不是通过 ID 查询 DOM 来获取对象，而是直接将对象传递给 JavaScript 函数。

Answer 2

如果你有一个固定的，你可以这样做。

.popup { 位置：绝对；宽度：140px；左边距：-70px；顶部：0px；左：50%；}