设置了定位position: absolute的盒子,将top设为0%,盒子顶部将会紧挨着父元素(已定位)的顶部,若设为100%,则盒子顶部将会紧挨着父元素底部。
计算公式为:top_percent = 子盒子顶部距父盒子顶部的距离 / 父盒子高度
由此可以理解:
.element {
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;/*盒子宽度的一半*/
margin-top: -50px;/*盒子高度的一半*/
}
这个代码为什么可以实现子元素在父元素中的绝对居中,但是该方法需要提前知道元素的尺寸,耦合性太强。
有个绝对定位居中更好的办法:
.element {
width: 200px;
height: 100px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;/*这行代码是关键*/
}
另外,对于background-position中的position值,则有点特殊,top: 0%时与上述相同,但是设置为100%时是盒子底部与父元素底部挨着。
计算公式为:top_percent = 子盒子顶部距父盒子顶部的距离 / (父盒子高度-子盒子高度)
这点需要注意。