父元素透明时，如何让子元素垂直居中？

父元素透明时，如何让子元素垂直居中？

有时，我们会遇到这样的情况：父元素透明度设为较低但不为0，而父元素中包含一个子元素，我们希望子元素垂直居中。然而，使用传统的定位方法，子元素的定位会受到父元素透明度的影响，导致无法垂直居中。

为了解决这个问题，我们可以采用以下方法：

1. 为子元素添加绝对定位

.child {
  position: absolute;
}

2. 使用 top 属性将其定位到父元素的 50%

.child {
  top: 50%;
}

3. 使用 transform 属性将子元素沿 Y 轴向上移动 50%

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

这三个步骤 combined 相结合，可以确保子元素垂直居中，同时文本位置不变。

注意：

• 由于父元素透明度已设为较低，因此需要为父元素使用 rgba() 而不是 opacity 来设置透明度。

  .parent {
  background-color: rgba(0, 0, 0, 0.2);
  }