[分享]css中如何给块元素垂直居中

CSS中如何给块元素垂直居中？

.vertical-center {
  position: relative; /* 父元素设置为相对定位，为后续绝对定位子元素提供基准 */
}

.vertical-center .child {
  position: absolute; /* 子元素使用绝对定位实现居中效果 */
  top: 50%; /* 将子元素顶部置于父元素中心 */
  transform: translateY(-50%); /* 使用transform将子元素向上移动自身高度的一半，即垂直居中 */
} 

解析：

首先，在需要垂直居中的父元素的CSS样式中，设置其position属性为相对定位。

接着，在子元素的CSS样式中，设置其position属性为绝对定位，以便将其相对于父元素进行定位。

然后，给子元素的top属性设置为50%，这样就能将其顶部置于父元素的中心点上。

最后，使用transform将子元素向上移动自身高度的一半，即可将其垂直居中。

以上就是CSS中给块元素垂直居中的实现方法。