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

2018-12-03 0 条评论 1.02k 次阅读 0 人点赞

现有如下情况,有一个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!

萌芽创想

这个人太懒什么东西都没留下

文章评论(0)