<style>
.box {
width: 500px;
height: 500px;
border: 5px solid gray;
margin: 0 auto;
display: flex;
}
.center {
width: 200px;
height: 200px;
background: red;
margin: auto;
}
</style>
<div class="box">
<div class="center"></div>
</div>
父元素设置弹性属性display:flex;
子元素外边距自动计算 margin:auto;
即可实现子元素水平、垂直方向的居中。