javascript - 使用 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
}