css水平垂直居中

要实现一个元素在水平和垂直方向上都居中的效果，可以使用以下方法：

1. 使用 flexbox 布局

可以将父元素设置为 `display: flex;`，并使用 `justify-content: center;` 和 `align-items: center;` 来让子元素在水平和垂直方向上都居中。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. 使用绝对定位

可以将子元素的宽度和高度都设置为固定值，并将其设置为绝对定位，同时将父元素设置为相对定位。然后使用 `top: 50%;` 和 `left: 50%;` 来将子元素的中心点移动到父元素的中心点，再使用 `transform: translate(-50%, -50%);` 将子元素向左上方移动自身宽度和高度的一半，即可实现水平和垂直方向上的居中效果。

.parent {
  position: relative;
}

.child {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3. 使用表格布局

可以将父元素设置为 `display: table;`，并将子元素设置为 `display: table-cell;`，然后使用 `vertical-align: middle;` 来使子元素在垂直方向上居中。在水平方向上，可以将父元素的 `text-align` 属性设置为 `center`。

.parent {
  display: table;
  text-align: center;
}

.child {
  display: table-cell;
  vertical-align: middle;
}