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

Answer 2

您需要使用 DOM 样式

试试这个：

function myFunction() {
    document.getElementById("MyDialog").style.position = "relative";
    document.getElementById("MyDialog").style.left = "50%";
   document.getElementById("MyDialog").style.right = "50%";
}

使用 Javascript 居中 div

Center a div using Javascript

html

javascript

height

width