javascript - 在javascript中，如何始终将微调器保持在当前屏幕的中心？

Question

我的以下代码无法使微调器始终显示在屏幕中央。有人可以帮我吗？

var div = document.createElement("div");
div.id="create";
div.style.top="50%";
div.style.left="30%";
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "white";
div.style.color = "blue";
div.innerHTML = "please wait while your request is processed.";
div.style.zIndex="5";
div.position="fixed";
div.style.margintop="-9em"; 
div.style.marginleft="-15em";  
document.getElementById('center').appendChild(div);
ams.showSpinner( {

    element: $('create'),
    opacity: 0.3,
    duration: 0.3
 } );

Answer 1

我推荐这种方法：

JS：

$("<div/>", {
    id: 'create',
    text: 'Please wait while your request is processed.'
}).appendTo('#center');
ams.showSpinner({
    element: $('create'),
    opacity: 0.3,
    duration: 0.3
});

CSS：

#create{
    background: white;
    color: blue;
    position:absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    width: 100px;
    z-index: 5;
    margin: -50px 0 0 -50px;
}

#create是50%从顶部和 50%，left但负边距值是其自身宽度/高度的一半，因此它位于中心。

我只添加了额外的 jQuery 代码以使其更具可读性，可以使用它来代替：

var div = document.createElement("div");
div.id = "create";
div.innerHTML = "please wait while your request is processed.";
document.getElementById('center').appendChild(div);
ams.showSpinner({
    element: $('create'),
    opacity: 0.3,
    duration: 0.3
});