css垂直居中和水平居中的方法有哪些

/* 第一种 flex 布局 */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 第二种 grid 布局 */
.parent {
  display: grid;
  justify-content: center;
  align-items: center;
}
/* 第三种 grid 的另一种 */
.parent {
  display: grid;
  place-items: center;
}
/* 第四种 */
.item {
  /* 绝对定位，需要设置父元素为相对定位 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}