使用 Javascript 将 div 居中

Question

我正在尝试将 div（屏幕中心）居中。这div不是 的直接子代，body所以我不能使用 css。目前，我使用以下 jQuery 代码将它放在我的页面上：

    var dialog = $('#MyDialog');
    dialog.css('left', ($('body').width()/2) - (dialog.width()/2));
    dialog.css('top', ($('body').height()/2) - (dialog.height()/2);

目标是删除 jQuery，我已经写过这个：

var showDialog = function(){

    var body = document.body;
    var html = document.documentElement;

    var bodyHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
    var bodyWidth = Math.max( body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth );

    var dialogWidth = 800;
    var dialogHeight = 560;

    var dialog = document.getElementById('MyDialog');
    dialog.style.left = (bodyWidth/2) - (dialogWidth/2) + 'px';
    dialog.style.top = (bodyHeight/2) - (dialogHeight/2) + 'px';

    dialog.style.display = "block";
}

关键是dialogWidth和dialogHeight是动态的。怎样才能得到它们？

Answer 1

通过CSS居中是一个更好的实践，如果你可以用JS居中，那么你肯定可以用CSS居中。

尝试：

#MyDialog {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: xxx; // Any width will be fine
    height: xxx: // Any height will be fine
}