有关绝对定位的居中问题的探讨
现有如下情况,有一个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!