水平垂直居中有哪些实现方式？

.box {
  height: 40px;
  line-height: 40px; /* 只适用于单行文本 */
  text-align: center; /* 让行内内容水平居中 */
}

.child {
  width: 200px;
  margin: 0 auto; /* 左右 auto 平分剩余空间 */
}

/* flex */
.parent {
  display: flex;
  justify-content: center; /* 主轴 */
  align-items: center; /* 交叉轴 */
}

/* grid：一行搞定 */
.parent {
  display: grid;
  place-items: center;
}

.parent {
  position: relative;
}

/* 写法一：不需要知道子元素尺寸 */
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 百分比相对自身尺寸，往回拉一半 */
}

/* 写法二：需要子元素有确定的宽高 */
.child {
  position: absolute;
  inset: 0; /* 等价于 top/right/bottom/left 都是 0 */
  width: 200px;
  height: 100px;
  margin: auto; /* 四个方向平分剩余空间 */
}