CSS 实现 div 内容垂直居中案例汇总

在网页设计中，实现 div 元素内容的垂直居中是一个常见的需求。本文将为您汇总一些实用的 CSS 方法来实现这一效果。

方法一：使用 Flex 布局

Flex 布局是一种强大而灵活的布局方式，实现垂直居中非常简单。以下是示例代码：

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

在上述代码中，.container 是包含内容的 div 元素。display: flex 使其成为 Flex 容器，align-items: center 实现垂直方向的居中，justify-content: center 实现水平方向的居中。

方法二：使用绝对定位与负边距

.container {
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

这里，先将容器设置为相对定位，然后将内部元素设置为绝对定位。通过 top: 50% 将元素顶部移动到容器的中间位置，再使用 transform: translateY(-50%) 向上移动元素自身高度的一半，从而实现垂直居中。

方法三：使用表格布局

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

这种方法利用了表格单元格的垂直对齐特性，但在现代网页开发中使用相对较少。

方法四：使用 line-height

.container {
  height: 300px;
  line-height: 300px;
}

.content {
  display: inline-block;
  vertical-align: middle;
}

这种方式适用于单行文本的垂直居中，通过设置容器的 line-height 与容器高度相同，并将内容设置为 inline-block 且 vertical-align: middle 来实现。

不同的方法在不同的场景下各有优劣，您可以根据具体的需求和页面结构选择最合适的方法。在实际应用中，还需要考虑兼容性和页面性能等因素。

希望以上这些案例能够帮助您在网页开发中轻松实现 div 内容的垂直居中，打造出更加美观和用户友好的页面。不断探索和实践，您将能够更加熟练地运用 CSS 来实现各种布局效果。