CSS 垂直居中 div 元素

在网页设计过程中，经常需要将一个 div 元素垂直居中。下面是几种实现方法：

方法一：使用 Flexbox

CSS Flexbox 是一种布局模式，最常用于将内容垂直居中。只需将父元素的 display 属性设置为 flex，然后使用 justify-content 和 align-items 属性将子元素居中。

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

方法二：使用 table-cell 属性

将 div 元素设置为 table-cell 属性，然后使用 vertical-align 属性将其垂直居中。

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

方法三：使用定位和 transform 属性

使用绝对定位将 div 元素居中，然后使用 transform 属性对其进行垂直移动，以实现垂直居中。

.parent {
  position: relative;
}

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

方法四：使用 Grid 布局

CSS Grid 布局是一种二维网格布局模式，可以轻松将元素垂直居中。

.parent {
  display: grid;
  place-items: center;
}

以上是四种将 div 元素垂直居中的方法。根据具体情况选择合适的方法即可。