CSS 页面垂直居中方法详解 - Flexbox、绝对定位、table-cell

CSS 实现页面垂直居中内容

本文将介绍三种常用的 CSS 页面垂直居中方法：Flexbox 布局、绝对定位和 table-cell 布局，并提供代码示例，帮助您轻松实现页面内容的垂直居中效果。

1. 使用 Flexbox 布局

Flexbox 布局是目前最常用的布局方式之一，它提供了强大的控制元素排列和对齐的能力。要使用 Flexbox 布局实现垂直居中，只需要设置 display: flex 和 align-items: center 属性即可。

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

2. 使用绝对定位

绝对定位也是一种常用的方法，它可以通过设置 position: absolute 和 top: 50% 属性将元素定位到父元素的中间位置。为了使元素真正居中，还需要使用 transform: translateY(-50%) 属性将元素向上移动一半的高度。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

3. 使用 table-cell 布局

table-cell 布局是另一种实现垂直居中的方法，它可以将元素看作表格的单元格，通过设置 display: table-cell 和 vertical-align: middle 属性实现垂直居中效果。

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

这三种方法各有优缺点，您可以根据实际情况选择最适合您的方法。