[分享]css不定高元素垂直居中

在页面中，有时我们需要对不定高的元素进行垂直居中，这时就需要使用一些CSS技巧来实现。首先，我们需要给父容器设置高度，如下所示：.parent { height: 200px; / 高度可以根据实际情...

在页面中，有时我们需要对不定高的元素进行垂直居中，这时就需要使用一些CSS技巧来实现。

首先，我们需要给父容器设置高度，如下所示：

.parent {
  height: 200px; /* 高度可以根据实际情况进行调整 */
  display: flex;
  justify-content: center;
  align-items: center;
} 

在这个例子中，我们使用了flex布局，通过设置justify-content: center和align-items: center实现了水平和垂直居中。这种方法适用于多个不定高元素居中。

如果只需要对单个元素进行垂直居中，可以使用下面的方法：

.parent {
  height: 200px;
  position: relative;
}

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

在这个例子中，我们给父容器设置了position: relative，让子元素的定位基准为父容器。子元素首先被定位到父容器的上方，然后通过top: 50%将子元素的顶部与父容器的中心对齐，最后通过transform: translateY(-50%)将子元素向上移动自身高度的一半，从而实现垂直居中的效果。