Question

这是关于“Element does not vertically stick on the middle of the screen”

的后续问题

我尝试使用以前解决过的JS代码并且它最初成功运行，但经过一些更新之后，代码突然变得不稳定并将模式弹出方式向下推，而不是粘在屏幕中间。

我怀疑代码中有.resize属性，但不知何故，代码仍然“不完整”。任何关于如何解决这个问题并使窗口保持绝对居中的帮助表示赞赏。

如果需要演示，请点击此处：FIDDLE

代码（JQuery / JavaScript）

$(function(){
    $(window).resize(function(){
        var offset = 0,
        viewportHeight = $(window).height(),
        $myDialog = $('.reveal-modal');
        $myDialog.css('top', (offset + (viewportHeight / 2)) - ($myDialog.height() / 2));
    }).resize();
});

Answer 1

您的计算不正确，您必须margin-top:作为-200px而不是-150px。

...
width: 300px;
height: 400px;
margin-left: -150px; // Half the width (negative)
margin-top: -200px; // Half the height (negative)
...

“垂直粘在中间屏幕上”的错误

1 个答案:

Fiddle