css - 为什么 'top: 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)