css垂直水平居中

/* 使用 Flexbox 实现垂直水平居中 */
.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 父元素高度为视口高度 */
}

/* 使用绝对定位和 transform 实现垂直水平居中 */
.parent {
  position: relative;
  height: 100vh; /* 父元素高度为视口高度 */
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 通过 transform 调整子元素位置 */
}

解释说明：

1. Flexbox 方法：通过设置父元素的 display: flex，并使用 justify-content: center 和 align-items: center，可以轻松实现子元素在父元素中的垂直和水平居中。
2. 绝对定位和 transform 方法：通过设置父元素为相对定位，子元素为绝对定位，并结合 top: 50% 和 left: 50% 以及 transform: translate(-50%, -50%)，也可以实现子元素的垂直和水平居中。这种方法适用于不使用 Flexbox 的场景。