居中垂直放置子元素
在具有透明度的父级块元素中，将子元素垂直居中的需求经常出现。下面是如何实现这一目标：
首先，我们需要使子元素在父级元素中绝对定位。将样式 position: absolute; 添加到子元素中。然后，我们需要将子元素放置在父级元素的垂直中心。为此，我们将 top 样式设置为 50%，并使用 transform: translatey(-50%); 将子元素往回移动其自身高度的一半。
吐槽大师
吐槽大师（Roast Master） – 终极 AI 吐槽生成器，适用于 Instagram，Facebook，Twitter，Threads 和 Linkedin
94 查看详情
子元素 { position: absolute; top: 50%; transform: translatey(-50%);}
为了保持文本在其原始位置，我们在父元素中使用 rgba() 函数而不是 opacity 来设置透明度。这样可以让文本保持不透明，而背景变为透明。
父元素 { background-color: rgba(0, 0, 0, 0.2);}
通过这些调整，子元素将垂直居中放置在父元素中，文本保持不变，并且父元素具有 0.2 的透明度。
以上就是如何在透明父元素中垂直居中子元素？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1166736.html
微信扫一扫 
支付宝扫一扫 
