css 垂直居中的几种实现方法

当我们需要将一个元素在容器中垂直居中时，可能会遇到一些困难，因为垂直居中需要对父元素和子元素进行操作，而且还需要考虑到子元素的大小和行高等因素。有几种实现方法可以用来解决这个问题。

方法一：使用 Flexbox

使用 Flexbox 布局可以轻松实现元素的垂直居中。将要垂直居中的元素的父元素设置为 display:flex。然后将子元素的 align-items 属性设置为 center。

示例代码：

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

.item {
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

实现效果：

方法二：使用 display:inline-block 和 vertical-align:middle

将要垂直居中的元素设置为 display:inline-block，然后将父元素的 line-height 属性设置与父元素高度相等，并将子元素的 vertical-align 属性设置为 middle。

示例代码：

.container {
  height: 200px;
  line-height: 200px;
  text-align: center;
}

.item {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

实现效果：

以上是两种实现 CSS 垂直居中的方法，每种方法都有其适用场景，开发者可以根据项目需求灵活使用。