如何让透明父盒子中的子盒子垂直居中，同时保留父盒文本位置？

如何让透明父盒中的子盒垂直居中，还让父盒文本位置不变？

通常情况下，为父容器设置透明度会导致文本和其他子元素也变得透明。为了解决这个问题，同时将子盒子垂直居中，可以使用以下方法：

• 为子元素使用绝对定位：position: absolute
• 设置子元素的 top 值为 50%，使其水平居中
• 使用 transform: translatey(-50%) 将子元素在垂直方向上移动 50%，使其垂直居中
• 为父容器使用 rgba() 函数设置背景透明度，而不是 opacity 属性。rgba() 函数允许您指定一个透明度值，而 opacity 属性会影响所有子元素的透明度。

示例代码：

.contAIner {   width: 200px;   height: 200px;   background: rgba(0, 0, 0, 0.2); }  .child {   position: absolute;   top: 50%;   transform: translateY(-50%);   background: white;   padding: 10px; }

这样，子盒就会垂直居中，而父盒的文本位置不变，且父盒具有 0.2 的透明度。