css不确定高度元素内垂直居中

CSS样式表中，有时候要让某些元素在其父元素内居中，而且这些元素的高度是不确定的。如何实现呢？接下来我们来看看一些方法。

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

上面的代码演示了一种使用 Flexbox 实现不确定高度元素垂直居中的方法。我们只需要设置父元素的 display 属性为 flex，然后再使用 justify-content 和 align-items 属性进行水平和垂直居中就可以了。

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

另外一种常见的方法是使用 position 属性。我们可以设置父元素的 position 为 relative，然后设置子元素的 position 为 absolute。接着使用 top: 50% 和 transform: translateY(-50%) 进行垂直居中。

综上所述，其中这两种方法是比较常见的实现不确定高度元素垂直居中的方法。其它的方法还有使用 table 和 line-height 属性等，根据具体情况选择不同的方法能更好地实现垂直居中效果。