美文网首页
div垂直加水平居中

div垂直加水平居中

作者: Homary | 来源:发表于2018-03-01 11:30 被阅读0次

    一: 绝对定位居中: 外层div相对对位,内层div绝对定位,top、left分别设为50%,再通过设置margin-top、margin-left为高度宽度的负数
    {
    position: absolute;
    top:50%;
    left:50%;
    margin-top:
    margin-left:
    }
    不足之处: 宽度必须是固定值

    二: {
    width: 70%;
    position: absolute;
    top:0; left:0; bottom:0; right:0;
    margin: auto
    }
    这个方法,不仅能在inner宽度不确定时发挥作用,还能兼容各种主流浏览器,看上去似乎很完美,但事实上,当我们的需求改为:宽度随内部文字自适应 ,即宽度未设置时,这种方法就无法满足需求了,原因是left、right设为0后,inner在宽度未设置时将占满父元素的宽度。

    运用CSS3:(兼容性问题: ie11- 不兼容)
    三: {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%)
    }
    四: flex弹性盒子居中

    div中img图片垂直居中(笔试)
    方法一: display:table-cell;
    text-align: center //水平居中
    vertical-align: middle;
    方法二: position: absolute; //父元素position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)

    相关文章

      网友评论

          本文标题:div垂直加水平居中

          本文链接:https://www.haomeiwen.com/subject/kxrgxftx.html