有关绝对定位的居中问题的探讨

现有如下情况，有一个page1的div，参数如下

.page1 {
    width：750px;
    height: 1136px;
    background: url(../imgs/bg.jpg) no-repeat center;
    overflow: hidden;
    position: relative;
}

page1设置成相对定位

然后他的一个子元素arrow使用绝对定位，它的宽高都是其内部的一张图片撑开的，代码如下

.page1 .arrow{
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

代码效果就是实现它居下边距的距离为60px；并且还让它水平居中

我们就来看看这个水平居中是怎么实现的，如代码所示的，要想水平居中，就需要让这个元素距左距右的值为0，并设置margin-right和margin-left均为auto，这样这个东西就居中了

同理，垂直居中也是一样的，将距上距下的值设为0，并设置margin-top和margin-bottom的值为auto，这样就实现垂直居中了

这是在开发中摸到的一个经验，get it！