样式 - 水平垂直居中

Flex布局实现

<div class="box">
     <section class="inner"></section>
</div>
<script>
.box {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  width: 600px;
  height: 600px;
}
.inner {
  width: 500px;
  height: 500px;
  background-color: red;
}
</script>