CSS未知高度垂直居中的实现

实现一个元素在其父元素中垂直居中是一个很常见的需求，在CSS中可以通过多个方法实现，但是在元素高度未知的情况下，如何实现元素的垂直居中则需要采用一些特殊的方法。

实现一个元素在其父元素中垂直居中是一个很常见的需求，在CSS中可以通过多个方法实现，但是在元素高度未知的情况下，如何实现元素的垂直居中则需要采用一些特殊的方法。

以下是CSS未知高度垂直居中的实现攻略：

方法一：使用Flexbox布局

首先给父元素设置display: flex; 和justify-content: center; 即可实现水平居中。然后再给子元素设置align-self: center; 即可实现垂直居中。这种方法比较简单并且兼容性良好，适用于大多数情况。

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

.child {
  align-self: center;
}

方法二：使用绝对定位

给父元素添加position: relative;属性，并给子元素设置position: absolute; top:50%; transform: translateY(-50%);即可实现垂直居中。这种方法也比较简单，但是需要调整子元素的定位属性，不太灵活。

.parent {
  position: relative;
}

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

示例说明

以下是两个示例，第一个示例使用Flexbox布局实现垂直居中，第二个示例使用绝对定位实现垂直居中：

示例一: Flexbox布局

<div class="parent">
  <div class="child">这是要垂直居中的元素</div>
</div>

.parent {
  display: flex;
  justify-content: center;
  height: 300px; /* 父元素高度 */
}

.child {
  align-self: center;
}

示例二：绝对定位

<div class="parent">
  <div class="child">这是要垂直居中的元素</div>
</div>

.parent {
  position: relative;
  height: 300px; /* 父元素高度 */
}

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

这两个示例都可以实现垂直居中效果，在使用时可以根据具体情况选择使用哪一种方法。