如何在 CSS 中垂直居中元素？

使用 CSS 技术使元素垂直居中

可以使用各种 CSS 方法来实现 div 中元素的垂直居中。以下是两种常见的方法：

Flexbox 方法

Flexbox 提供了一个多功能的布局系统，允许灵活的项目对齐。要使用 Flexbox 垂直居中元素，请按照以下步骤操作：

1. 使用 display: flex 将父容器设置为具有 Flex 显示。
2. 指定列的 Flex 方向来堆叠元素垂直。
3. 使用 justify-content: center 垂直对齐项目。

例如，这是使用 Flexbox 的 CSS 片段：

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

表格和定位方法

此方法利用表格显示和定位：

1. 设置body为display:table建立类似表格结构。
2. 设置父容器显示：table-cell 和vertical-align: middle 以垂直对齐内容。
3. 使用 margin: 0 auto 将元素居中。

这是此方法的 CSS 代码：

body {
  display: table;
}

#container {
  display: table-cell;
  vertical-align: middle;
}

.box {
  margin: 0 auto;
}

哪种方法选择？

Flexbox 通常是首选，因为它简单、高效且布局选项广泛。不过，如果担心对旧版浏览器的支持，可以采用表格和定位方式。

以上是如何在 CSS 中垂直居中元素？的详细内容。更多信息请关注PHP中文网其他相关文章！