jQuery 和 CSS 将绝对 div 设置到屏幕的中心(检测屏幕的分辨率)

Question

我想创建一个包含登录表单(或其他功能)的新层，并且我想将其显示在屏幕中央(取决于屏幕的分辨率和内容)。

这是代码:

  function new_layer() {
    $('#frameContainer, #showbox').show();
    $('#showbox').load('includes/login.php');
    $(document).ready(function(){
        var hei = eval($(window).height()/2 - $('#showbox > *').outerHeight()/2);
        var wid = eval($(window).width()/2 - $('#showbox > *').outerWidth()/2);
        $('#showbox').css({
          top: hei + "px",
          left: wid + "px"
        }).show();
    });

    // ..................

第一次，它不起作用，文件 login.php 的内容居中 :( ，但是当我点击外部隐藏它，然后再次点击，它起作用了。当刷新页面，问题又出现了。

问题是什么，我该如何解决？

Answer 1

你不需要 JS 计算:

#loginDialog {
    height: 300px;
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px; /* half of the height */
    margin-left: -200px; /* half of the width */
}