让子盒子在透明父盒子内垂直居中，文本位置不变
我们在 HTML 中有一个包含文本的父盒子
。现在我们需要添加一个子盒子，让它垂直居中，同时保持文本位置不变。并且，父盒子是透明度为 0.2 的，而子盒子是不透明的。
要实现这个效果，我们可以使用 CSS 中的 position 和 transform 属性。
绝对定位子盒子：我们使用 position: absolute; 将子盒子设置为绝对定位，这样它就可以相对于父盒子进行定位。垂直居中子盒子：使用 top: 50%; 将子盒子定位到其父盒子的垂直中间。向上移动子盒子半高：为了将子盒子实际上对齐文本，我们使用 transform: translateY(-50%); 将其向上移动其自身高度的一半。不透明子盒子：将子盒子的 background-color 设置为一个不透明的颜色，例如 #000。
完整的 CSS 代码如下：
p { position: relative; background: rgba(0, 0, 0, 0.2);}p > child { position: absolute; top: 50%; transform: translateY(-50%); background-color: #000; color: #fff;}
登录后复制
以上就是如何在透明父盒子内垂直居中子盒子，并保持文本位置不变？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2805523.html
