AI生成--CSS实现块元素垂直水平居中方法

CSS实现块元素垂直水平居中有几种方法：

1. 使用Flexbox布局

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

2. 使用绝对定位和负边距

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3. 使用table-cell

.container {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
  text-align: center; /* 水平居中 */
}

4. 使用grid布局

.container {
  display: grid;
  place-items: center; /* 水平垂直居中 */
}

需要注意的是，以上方法并不是适用于所有情况的，有些情况需要根据实际情况选择不同的方法。