Question

我正在进行某种覆盖，以表明正在加载页面（或某个元素）。我正在尝试定位div，其中说：“正在加载...”位于页面或被定位元素的中心。

这是我的方法，但根本不起作用......

var left, top,
    position = 'fixed';

if (this.container !== 'body'){
  position = 'absolute';
}

left = (window.innerWidth - this.element.offsetWidth) / 2;
top = (window.innerHeight/2) - (this.element.offsetHeight/ 2);

this.modal.style.left = left + 'px';
this.modal.style.top = top + 'px';
this.modal.style.position = position;

请说明没有jQuery，我不打算使用jQuery。

Answer 1

如果您要对所有动作通知使用相同的div，我的意思是不同的元素，但是相同的div，如果不使用JS，您将无法执行此操作。但至少jQuery会使代码更容易：

您可以.offset找出相对于整个文档的当前元素位置，并.height()找出元素.width()来计算弹出坐标。

Answer 2

Use css to center the "cover" over the loading part, then use jquery to hide the "cover" div when completed.

<html>
    <style>
        #outer
        {
            position: absolute;
            left: 10px;
            top: 10px;
            height: 300px;
            width: 300px;
            border: 1px solid black;
            background-color: red;
        }

        #loading
        {
            position: absolute; 
            background-color: blue; 
            width: 200px; 
            height: 200px; 
            margin-left: -100px; 
            left: 50%; 
            margin-top: -100px; 
            top: 50%;
            border: 1px solid black;
        }
    </style>
    <script src="jQuery.js"></script>
    <script>
        $(document).ready(function() {
            $("#loading").hide();
        });
    </script>
    <div id="outer">
        <div id="loading">

        </div>
    </div>
</html>

Answer 3

最后想通了：

var left, top,
    position = 'fixed';

if (this.container !== 'body'){
  position = 'absolute';
}
var rect = this.element.getBoundingClientRect();

left = Math.round(((rect.width - this.modal.offsetWidth) / 2) + rect.left);
top = Math.round(((rect.height - this.modal.offsetHeight) / 2) + rect.top);

this.modal.style.left = left + 'px';
this.modal.style.top = top + 'px';
this.modal.style.position = position;

这将使元素在给定元素内正确居中。

定位div相对于另一个元素居中

3 个答案: