0

我想要页面中心的加载动画。这是本作的风格<div id="loading">

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

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

4

4 回答 4

4 
#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 */
}

演示

您可能想阅读有关垂直居中技术的更多信息（在您的情况下是方法 2）

于 2012-08-31T14:23:55.637 回答
2

使用topandleft时，它会偏移左上角。 bottom并left偏移左下角。

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

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

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

于 2012-08-31T14:26:36.983 回答
1

因为您没有考虑加载微调器的高度和宽度，因此它会有点 - 小于 - 顶部和左侧的 50%。

每个人都击败了我到下一部分，但是是的，你总是divide / 2你的 div/image/etc 的高度和宽度，这使得负上边距和左边距。

在你的情况下，图像是 50px 宽和高，除以 2，繁荣，你想使用 -25px

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

这是一篇关于负边距技巧的好文章

于 2012-08-31T14:23:47.870 回答
1

干得好：

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

于 2012-08-31T14:24:34.217 回答