[分享]CSS元素垂直居中的6种方法

CSS中元素垂直居中十分常见，今天我们来总结一下有哪些方法可以实现元素垂直居中。1. Flexbox使用Flexbox是最方便的一种方法，只需要将容器设置为display: flex;，并通过alig...

CSS中元素垂直居中十分常见，今天我们来总结一下有哪些方法可以实现元素垂直居中。
1. Flexbox
使用Flexbox是最方便的一种方法，只需要将容器设置为display: flex;，并通过align-items:center;将子元素垂直居中即可。

css
.container {
  display: flex;
  align-items: center;
} 

2. position + top
通过将子元素设置为绝对定位，并将top属性设为50%，再加上负的margin-top即可实现元素垂直居中。

css
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  margin-top: -25px; /* 子元素高度的一半 */
} 

3. position + transform
与上面的方法类似，通过将子元素设置为绝对定位，并通过transform将子元素移动50%的距离即可实现垂直居中。

css
.parent {
  position: relative;
}

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

4. table-cell
通过将父元素设置为display: table-cell，再通过vertical-align: middle实现元素垂直居中。

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

5. line-height
通过设置父元素的line-height属性与父元素高度相同，并将子元素的display属性设为inline-block即可实现元素垂直居中。

css
.parent {
  height: 50px;
  line-height: 50px;
}

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

6. calc
通过calc函数计算父元素高度的一半再加上子元素高度的一半来实现元素垂直居中。

css
.parent {
  height: 100px;
}

.child {
  height: 50px;
  margin-top: calc(50% - 25px);
} 

以上就是实现元素垂直居中的六种方法，分别为Flexbox、position + top、position + transform、table-cell、line-height和calc，选择适合自己的方法即可！