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

使用top和left时，它会偏离左上角。 bottom和left偏离了左下角。

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

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

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

Answer 3

因为你没有考虑到装载旋转器的高度和宽度，所以它有点不会超过50％top＆amp;剩下。

每个人都打我到下一个部分，但是你总是divide / 2高度＆amp;您的div / image / etc的宽度，并使否定顶部＆amp;左边距。

在你的情况下，图像是50px宽＆amp;高，除以2，繁荣，你要使用-25px

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

这是关于negative margin trick

的好文章

Answer 4

你走了：

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

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

4 个答案: