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

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

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

示例代码：

AI舌诊面诊问诊医疗系统+诊疗商城系统源码

AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。

下载

.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 的透明度。