[分享]css不固定高度垂直居中

CSS中垂直居中一直是一个让人头疼的问题，尤其是在不固定高度的情况下。接下来，我们将一步步探讨如何实现不固定高度的垂直居中。首先，我们需要明确一点，实现垂直居中需要有一个父元素和一个子元素。在不固定高...

CSS中垂直居中一直是一个让人头疼的问题，尤其是在不固定高度的情况下。接下来，我们将一步步探讨如何实现不固定高度的垂直居中。

首先，我们需要明确一点，实现垂直居中需要有一个父元素和一个子元素。在不固定高度的情况下，我们可以采用以下两种方法实现垂直居中：

方法一：使用相对定位

.parent {
    position: relative;
}

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

在这种方法中，我们给父元素设置relative定位，让子元素相对于父元素进行定位。然后，我们给子元素设置absolute定位，并将top属性设置为50%，让子元素的顶部距离父元素的顶部偏移50%的高度。最后，我们采用transform: translateY(-50%)，将子元素往上移动50%的高度，实现垂直居中的效果。

方法二：使用 Flex 布局

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

在这种方法中，我们将父元素的display属性设置为flex，让它变成一个弹性盒子。然后，我们使用justify-content:center和align-items:center属性，将子元素水平居中和垂直居中。这种方法简洁明了，且兼容性较好，是实现垂直居中的一个不错的选择。

综上所述，不固定高度的垂直居中可以使用相对定位或Flex布局两种方法来实现。可以根据实际情况选择其中一种或两种方法结合使用，来达到最好的效果。