固定定位和绝对定位的居中样式

/* 绝对定位 */
.parent-class {
  position: relative;
}

.child-class {
  position: absolute;
  
  /* 方法一 对于有固定宽度或者高度的容器 */
  width: 200px;
  left: 50%;
  margin-left: calc(50% - 100px);
  /* 方法二 对于没有固定宽度或者高度的容器 */
  left: 0;
  right: 0;
  margin: 0 auto;
}

/* 固定定位 */
.child-class {
  /* 和相对定位相同 */
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}