Question

在为许多浏览器，移动设备和桌面设备开发网站的过程中，我注意到以下CSS可以很好地集中加载div。

img.loading1 {
    position:absolute;
    left:50%;
    margin-left:-16px;
    top:50%;
    margin-top:-16px;
    z-index:10
}
.loading2 {
    color:#006BB2;
    position:absolute;
    left:50%;
    margin-left:0px;
    top:40%;
    z-index:5
}
.loading3 {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background-color:lightgrey;
    opacity:0.85
}

<div id="container" style="position:relative">
    ...content ommitted...
    <div id="loading" style="display:none">
        <div class="loading3"></div>
        <img class="loading1" src="images/loader-ajax.gif" width="32" height="32">
        <span class="loading2" id="getting">Getting your request...</span>
    </div>
    ...content ommitted...

div的显示设置为'block'，3个项目中心很棒。

但是，在移动屏幕上，当水平方向正确时，垂直位置可能会在屏幕外，具体取决于“包含”div的高度。

是否可以找到屏幕的中心并定位图像并使用Javascript进行扩展？

编辑1：加载div的高度是否必须设置为屏幕高度才能生效？

Answer 1

相关信息：

每个绝对定位的元素都相对于容器定位。默认容器是正文标记。

如果未指定尺寸，则将具有绝对位置的元素收缩包装为其内容的大小。在JavaScript中计算大小时，返回的值是当前大小恰好是基于它包含的内容。除非宽度或高度明确设置为100％，否则元素的大小不会与其父元素相同。

不使用jQuery：

获取容器元素的x和y位置（相对于视口），视口的宽度和高度以及元素的宽度和高度。

将top设置为视口高度的一半，减去容器y位置，减去元素高度的一半。将left设置为视口宽度的一半，减去容器x位置，减去元素宽度的一半。

// Center an absolutely-positioned element in the viewport.
function centerElementInViewport(el, container) {

    // Default parameters
    if ((typeof container == 'undefined') || (container === null))
        // By default, use the body tag as the relative container.
        container = document.body;

    // Get the container position relative to the viewport.
    var pos = container.getBoundingClientRect();

    // Center the element
    var left = ((window.innerWidth >> 1) - pos.left) - (el.offsetWidth >> 1);
    var top = ((window.innerHeight >> 1) - pos.top) - (el.offsetHeight >> 1);
    el.style.left = left + 'px';
    el.style.top = top + 'px';
}

这是一个jsfiddle demo。如果在jsfiddle中运行它时出现问题，请尝试此standalone demo。

在IE7 / 8/9，Firefox，Chrome，Safari和Safari Mobile（iOS）中进行了测试。到目前为止唯一导致问题的是，如果绝对定位的元素有一个边距（目前这个函数不支持）。

尚未在响应式设计中进行过测试。

注意：首次加载页面时，请注意不要调用此功能。如果浏览器已滚动或缩放然后重新加载，则页面可能尚未重新编辑或缩放回原来的位置，结果位置将不正确。在调用函数之前设置100毫秒的计时器似乎有效（允许浏览器时间重新滚动并重新缩放页面）。

Answer 2

在我的exeprience中，这很难用html / css

我发现最简单的方法是使用Javascripts innerHeight属性

代码看起来像：

if (window.innerHeight) {
  var loadingHeight = document.getElementById('loading').offsetHeight;
  document.getElementById('loading').style.top = (((window.innerHeight/2)-loadingHeight) + "px");
}

你可以使用相同的方法设置水平位置，但用相应的宽度选项替换height，offsetHeight和window.innerHeight方法，它们都在网上有详细记录

Answer 3

使用position: fixed修复width＆amp; height。

如何在移动屏幕上居中“获取数据”

3 个答案: