父元素透明时，如何让子元素垂直居中？
有时，我们会遇到这样的情况：父元素透明度设为较低但不为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);}
以上就是父元素透明时，如何让子元素垂直居中？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1557820.html
微信扫一扫 
支付宝扫一扫 
