CSS 垂直居中模式

在制作网页时，经常需要将元素垂直居中。 垂直居中有很多种实现方式，下面介绍几种常用的方法。

方法一：使用 table-cell

将父元素设为 table，子元素设为 table-cell，然后设置 vertical-align: middle。这种方法要求子元素不能固定宽高。

.parent {
  display: table;
  height: 200px;
  width: 100%;
  /* 可以将 height 设置成任意值 */
}

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

方法二：使用 flexbox

将父元素设为 display: flex，然后使用 align-items: center 和 justify-content: center 属性。

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

方法三：使用绝对定位

将子元素的 top 和 left 属性设为 50%，然后再使用 transform 属性将其向上和向左移动自身一半的高度和宽度。

.parent {
  position: relative;
}

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

方法四：使用 line-height

在父元素中设置一个和高度相等的 line-height，然后将子元素设置为 display: inline-block。

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

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

以上就是常用的几种垂直居中的方法，使用不同的方法可以根据实现功能的需要选择最合适的方式。