1.利用translate的偏移定位。
#app{ ???background:green; ???width:500px; ???height:500px; ???position:relative;}#box{ ???background:red; ???position:absolute; ???left:50%; ???top:50%; ???transform:translate(-50%,-50%);} 2.利用flex布局
#app { ?display: flex; ?justify-content: center; ?align-items: center; ?width: 500px; ?height: 500px;}#box{ ?width: 100px; ?height: 100px;}备注：css遮罩层
<div id=‘app‘></div><div id="box"></div>
#app{ ???background:green; ???position:fixed; ???top:0;left:0;right:0;bottom:0;}#box{ ???background:red; ???position:absolute; ???left:0; ???top:0; ???right:0; ???bottom:0; ???width:300px; ???height:300px; ???margin:auto;}学习：https://segmentfault.com/a/1190000017198399
css实现垂直水平居中
原文地址：https://www.cnblogs.com/yaoya/p/10045599.html