在开发一个网站有浏览器，移动和桌面，我注意到下面的CSS很好地工作到中心加载股利。
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被设置为屏幕的高度，这个工作？
相关信息：
每个绝对定位元件相对于容器定位。 默认容器是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，火狐，铬，Safari和Safari的移动（IOS）进行了测试。 发现导致问题至今的唯一的事情是，如果绝对定位的元素有一个保证金（此功能目前不支持）。
有没有在响应式设计测试过。
注意：要小心，不要调用此函数时，第一次加载页面。 如果浏览器已滚动或放大，然后重新加载，页面可能没有被rescrolled或放大回到它还在，并将得到的位置是不正确的。 在调用之前设置100毫秒的计时器似乎工作（允许浏览器的时间rescroll和rezoom页）。
使用position: fixed用固定width及height 。
在我exeprience这是很难用HTML / CSS做
我已经找到了最简单的方法是使用Javascript角innerHeight属性
代码可能是这样的：
if (window.innerHeight) {
var loadingHeight = document.getElementById('loading').offsetHeight;
document.getElementById('loading').style.top = (((window.innerHeight/2)-loadingHeight) + "px");
}
可以使用相同的方法但替换高度设置的水平位置，和的offsetHeight方法window.innerHeight与相应的宽度的选择，它们都被充分记载在网络上
