如何让元素在父容器中垂直居中

一、使用flexbox

可以使用Flexbox布局实现垂直居中。在父元素上设置display: flex，并设置align-items: center属性。这将使子元素垂直居中对齐。同时，可以利用justify-content: center属性来实现子元素水平居中对齐。

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

二、使用绝对定位

可以使用绝对定位来实现垂直居中。在父元素上设置样式position: relative属性，同时设置子元素的top、left、bottom、right属性都为0，再设置margin: auto实现子元素水平居中。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

三、使用transform属性

可以使用transform属性来实现垂直居中。在父元素上设置position: relative属性，然后设置子元素的position: absolute和top: 50%属性，接着使用transform: translateY(-50%)属性实现子元素垂直居中对齐。

.parent {
  position: relative;
}

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

四、结合line-height属性

可以结合line-height属性实现垂直居中。在父元素内部设置line-height属性，设置为父元素的高度，然后在子元素上设置属性display: inline-block和vertical-align: middle即可实现子元素垂直居中对齐。

.parent {
  height: 200px;
  line-height: 200px;
}

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

五、使用table布局

可以使用table布局来实现垂直居中。在父元素上设置display: table属性，然后再设置子元素为display: table-cell，并设置属性vertical-align: middle即可实现子元素垂直居中对齐。

.parent {
  display: table;
}

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