用CSS实现垂直居中布局

能者

要在CSS中实现垂直居中布局，可以使用以下几种方法：

1. 使用flexbox布局

[CSS] 纯文本查看 复制代码

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

上述代码中，将容器的`display`属性设置为`flex`，然后使用`align-items`属性将内容垂直居中，使用`justify-content`属性将内容水平居中。

2. 使用绝对定位和transform属性

[CSS] 纯文本查看 复制代码

.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 平移自身宽高的一半 */
}

上述代码中，将容器的`position`属性设置为`relative`，然后在要垂直居中的元素上设置`position`属性为`absolute`，并通过`top: 50%;`和`left: 50%;`将元素的左上角定位到容器的中心点，最后使用`transform`属性的`translate`函数将元素向左和向上平移自身宽高的一半。

3. 使用表格布局

[CSS] 纯文本查看 复制代码

.container {
  display: table;
}

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

上述代码中，将容器的`display`属性设置为`table`，然后在要垂直居中的元素上设置`display`属性为`table-cell`，并使用`vertical-align`属性将元素垂直居中，使用`text-align`属性将元素水平居中。

以上是几种实现垂直居中布局的常用方法，可以根据具体情况选择适合的方法来使用。