css垂直居中

/* 使用 Flexbox 实现垂直居中 */
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;    /* 垂直居中 */
  height: 100vh;          /* 设置容器高度为视口高度 */
}

/* 使用 Grid 实现垂直居中 */
.container {
  display: grid;
  place-items: center;    /* 同时实现水平和垂直居中 */
  height: 100vh;          /* 设置容器高度为视口高度 */
}

/* 使用绝对定位和 transform 实现垂直居中 */
.container {
  position: relative;
  height: 100vh;          /* 设置容器高度为视口高度 */
}

.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 通过 transform 实现精确居中 */
}

解释说明：

1. Flexbox：通过 display: flex 和 align-items: center 可以轻松实现子元素的垂直居中，同时使用 justify-content: center 实现水平居中。
2. Grid：display: grid 和 place-items: center 是一种简洁的方式，可以同时实现水平和垂直居中。
3. 绝对定位 + transform：通过设置父容器为相对定位，子元素为绝对定位，并结合 top: 50% 和 left: 50%，再使用 transform: translate(-50%, -50%) 来调整位置，从而实现精确的居中效果。