为什么'顶部：50％'不起作用？

Question

我想要加载动画在页面的中心。这是对<div id="loading">

#loading{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
} 

的风格，但它不是在市中心，我不知道为什么。 This是加载的jsfiddle页面。有谁能够帮助我？

Answer 1

#loading{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -25px; /* half of your element's height */ 
    margin-left: -25px; /* half of your element's width */ 
} 

DEMO好文章

您可能想了解更多关于vertical centering techniques（在您的情况下，它是方法2）

Answer 2

因为你没有考虑到你的加载微调器的高度和宽度，所以它会是一点点 - 没有 - 超过50％顶部&左侧。

每个人都打我的下一个部分，但是是你总是divide/2高度&宽度的DIV /图像/等，使该负顶部&左边距。

在你的情况下，图像是50像素宽&高，2，吊杆分，要使用-25px

margin-top: -25px; 
margin-left:-25px; 

这里是关于negative margin trick

Answer 3

在这里你去：

http://jsfiddle.net/skq7Y/5/

Answer 4

当使用top和left，它抵消了左上角。 bottom和left偏移左下角。

基本上，你并没有告诉浏览器＃中心应该居中，而是左上角应居中。

---

编辑：水平定心一个div的更有前途的方法是使用margin: 0 auto;。这样你就不必处理div的宽度。

我不知道任何垂直方向执行此操作的单行CSS。