在 CSS 布局中，经常需要将子盒子在父盒子中垂直居中，同时保持文本位置不变。以下方法可以实现这一效果：
1. 透明度设置
使用 rgba() 来设置父盒子的透明度，而不是 opacity。这将允许子盒子保持不透明。例如：
.parent {
background-color: rgba(0, 0, 0, 0.2);
}2. 绝对定位和转换
立即学习“前端免费学习笔记（深入）”；
针对父元素将子元素绝对定位，并在 top 上设置 50%。然后使用 transform: translateY(-50%) 将子元素向下平移 50%，使其垂直居中。
例如：
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: black; /* 设置文本颜色 */
}通过这两个步骤，你可以将子盒子在父盒子中垂直居中，同时保持文本位置不变，并保证父盒子的透明度为 0.2。
以上就是如何让 CSS 父盒子中垂直居中的子盒子文本位置不变？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
510
收藏
