您现在的位置：首页 >> 前端 >> 内容

介绍一个新的水平垂直居中的方法

时间：2017/11/14 15:15:10 点击：

　　核心提示：平常方法：.demo{position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);}新get到的方法：html：p clas...

平常方法：

.demo{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

新get到的方法：

html：

<p class="container">
    <p class="box">
        <img src="duobao/images/5.png" alt="">
    </p>
</p>

css：

.container{
    width:100%;
    height:100vh;
    background:#cccccc;
    z-index:10;
    text-align:center;
}
.container::after{
    display: inline-block;
    content:'';
    width:0;
    height:100%;
    vertical-align: middle;
}
.box{
    display: inline-block;
    border:1px solid red;
}

兼容性很好，虽然现在已经很少考虑兼容了。不过学了一个方法也是美滋滋。