新get到的一个水平垂直居中的方法

参考地址：http://www.zhangxinxu.com/study/201209/vw-vh-css-custom-dialog.html

平常方法：

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

新get到的方法：

html：

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

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;
}

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