父容器有文本的情况下，如何实现子元素垂直居中？

父容器文本存在如何实现子元素垂直居中？

为了使子元素在存在文本的父容器中垂直居中，需要采取以下步骤：

• 子元素采用绝对定位，并设置 top: 50%。
• 为了抵消 top: 50% 的效果，在子元素上应用 transform: translatey(-50%) 属性。
• 由于父元素透明度为 0.2，建议使用 rgba() 属性设置颜色，而不是 opacity 属性，以确保子元素不透明度不受影响。

示例代码：

<p>文本</p>
<div>子元素</div>

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

p {
  color: rgba(0, 0, 0, 0.5);
}

以上就是父容器有文本的情况下，如何实现子元素垂直居中？的详细内容，更多请关注其它相关文章！