CSS中position的百分比表示法及绝对定位居中

设置了定位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 = 子盒子顶部距父盒子顶部的距离 / （父盒子高度-子盒子高度）
这点需要注意。