1

在为许多浏览器、移动和桌面开发网站时，我注意到以下 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 的显示设置为“阻止”，3 个项目居中。

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

是否可以使用 Javascript 找到屏幕的中心并定位图像并跨越那里？

编辑 1：加载 div 的高度是否必须设置为屏幕高度才能正常工作？

4

3 回答 3

1

相关资料：

每个绝对定位的元素都是相对于容器定位的。默认容器是 body 标签。

如果未指定尺寸，则具有绝对位置的元素将收缩到其内容的大小。在 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 演示。如果在 jsfiddle 中运行它有问题，试试这个独立的演示。

在 IE7/8/9、Firefox、Chrome、Safari 和 Safari Mobile (iOS) 中对其进行了测试。到目前为止，唯一导致问题的是绝对定位的元素是否有边距（此功能目前不支持）。

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

注意：注意不要在页面首次加载时调用此函数。如果浏览器被滚动或缩放然后重新加载，页面可能还没有被重新滚动或缩放回原来的位置，结果位置将不正确。在调用该函数之前设置一个 100 毫秒的计时器似乎有效（允许浏览器有时间重新滚动和重新缩放页面）。

于 2012-07-06T17:46:05.903 回答
0

在我的经验中，这很难用 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 方法替换为各自的宽度选项，它们都在网络上有很好的记录

于 2012-07-06T15:25:00.950 回答
0

position: fixed与修复width&一起使用height。

于 2012-07-06T15:42:51.760 回答