Center Div垂直居中 - CSS

在前端开发中，我们经常需要将某个 div 元素垂直居中来达到更好的布局效果。本文将介绍如何使用 CSS 实现 div 元素的垂直居中。

方法一：Flex 布局

使用 Flex 布局是一种简单而有效的方式来实现 div 元素的垂直居中。

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

在上述代码中，我们使用 display: flex 将 .container 声明为 Flex 容器。justify-content 和 align-items 属性分别用来水平和垂直居中。

此外，我们还可以通过 flex-direction 属性来设置元素的排列方式。默认情况下，Flex 容器的主轴方向为水平方向。如果想要实现垂直居中，我们只需要将主轴方向改为垂直方向即可。

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

方法二：Absolute + Transform

另一种常见的实现方式是使用 position: absolute 和 transform: translate()。

.container {
  position: relative;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在上述代码中，我们使用 position: relative 声明 .container 的定位方式。.box 元素使用 position: absolute 将其脱离文档流，并通过 top 和 left 属性将其定位到父元素的中心。最后，使用 transform: translate() 将 .box 元素在水平和垂直方向上分别向左和向上移动自身宽高的一半，即完成了垂直居中的效果。

需要注意的是，在使用 position: absolute 时，父元素必须为非静态定位（即position: relative），否则 .box 元素将以文档的最左上角为相对参照点进行绝对定位。

方法三：Table 布局

我们也可以使用 Table 布局来实现垂直居中。

.table {
  display: table;
  height: 100%;
  width: 100%;
}

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

在上述代码中，我们使用 display: table 将 .table 元素声明为表格容器，并将其高度和宽度设置为 100%。接着，使用 display: table-cell 将 .cell 元素声明为表格单元格，并使用 vertical-align: middle 实现垂直居中。

需要注意的是，使用 Table 布局可能会影响到元素的可访问性、可维护性和响应式布局等方面。因此，我们应该在使用时仔细权衡利弊，并选择最适合当前场景的实现方式。