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

学习文章要努力，但是不要急！今天的这篇文章《父元素透明时，如何让子元素垂直居中？ 》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

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

有时，我们会遇到这样的情况：父元素透明度设为较低但不为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);
  }

本篇关于《父元素透明时，如何让子元素垂直居中？ 》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！