[分享]css中如何设置高度居中

在 CSS 中，要使元素的高度垂直居中，可以使用 flex 布局或表格布局。以下示例使用 flex 布局实现：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 300px; /* 设置容器高度 */
} 

上面的代码中，我们将容器设置为 flex 布局，并设置了 justify-content 和 align-items 属性分别居中容器的水平和垂直方向。同时，我们也设置了容器的 height 属性为 300px。

如果你不想使用 flex 布局，还可以采用 table 和 table-cell 的方式实现垂直居中：

.container {
  display: table;
  height: 300px; /* 设置容器高度 */
}

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

上述代码中，我们将容器的 display 属性设置为 table，将内部元素的 display 属性设置为 table-cell，然后使用 vertical-align 和 text-align 属性将元素垂直和水平居中。