設定了定位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 = 子盒子頂部距父盒子頂部的距離 / （父盒子高度-子盒子高度）
這點需要注意。