上下左右居中

<div className={styles.bg}>
    <div className={styles.body}>
        我是内容
    </div>
</div>

一、上下左右居中：（内容高度宽度固定）

.bg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width:100%;
  height:100%;
  
  z-index: 2000;
  background-color: rgba(0, 0, 0, 0.7);
}
.body {
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  
  width: 708px;
  height: 599px;
  background-color: red;
  box-shadow: 0px 2px 8px rgba(0,0,0,0.2);
}

二、上下左右居中：（内容高度或者宽度不固定）

.bg {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.7);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
}

.body {
  position: absolute;
  margin: 0 auto;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
}

三、通过margin

{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

1. 在普通内容流中，margin:auto的效果等同于margin-top:0;margin-bottom:0。
2. position:absolute使绝对定位块跳出了内容流，内容流中的其余部分渲染时绝对定位部分不进行渲染。
3. 为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框，此时该块块将填充其父元素的所有可用空间，所以margin 垂直方向上有了可分配的空间。
4. 再设置margin 垂直方向上下为auto，即可实现垂直居中