美文网首页
div垂直居中的一些方法css

div垂直居中的一些方法css

作者: 新篇章 | 来源:发表于2018-03-20 10:53 被阅读0次

    方法一

    知道div宽高的情况下:
    div{
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -divWidth50%;
        margin-top: -divheight50%;
    }
    

    方法二:

    不知道宽高,flex流体布局:
    divParent{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    

    方法三

    不知道宽高,固定定位:
    div{
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 9;
        transform: translateX(-50%) translateY(-50%);
    }
    

    相关文章

      网友评论

          本文标题:div垂直居中的一些方法css

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