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

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