参考地址: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; }
兼容性很好,虽然现在已经很少考虑兼容了。 不过学了一个方法也是美滋滋。