• Contents

CSS 实现水平垂直居中的方式分为两种情况：

居中元素定宽高

• absolute + 负margin
• absolute + margin auto
• absolute + calc

居中元素不定宽高

• absolute + transform
• lineheight
• writing-mode
• table
• css-table
• flex
• grid

absolute + 负margin

.wp {
  position: relative;
}
.box {
  position: absolute;;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

absolute + margin auto