css居中

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

/* 使用绝对定位和 transform 实现居中 */
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 调整元素自身位置实现居中 */
}

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

解释说明：

1. Flexbox 居中：通过 display: flex 和 justify-content: center、align-items: center，可以轻松实现子元素在父容器中的水平和垂直居中。
2. 绝对定位 + transform 居中：通过 position: absolute 和 transform: translate(-50%, -50%)，可以将元素相对于其原始位置进行偏移，从而实现居中效果。
3. Grid 居中：使用 display: grid 和 place-items: center 可以简洁地实现居中布局。