网页设计中，常需将子元素在父元素内垂直居中。然而，当父元素设置透明度（例如，使用opacity属性）且包含文本时，如何确保子元素垂直居中、文本位置不变，且子元素保持不透明，是一个挑战。本文提供一种有效的CSS解决方案。
假设结构如下：一个父元素包含一段文本和一个子元素（图片）。父元素透明度设为0.2。目标是将图片在父元素内垂直居中，同时保持文本位置和图片不透明度。
直接使用opacity会影响子元素透明度。因此，我们改用rgba()函数设置父元素背景颜色，它允许设置颜色和alpha值（透明度）。
为了垂直居中子元素，我们采用绝对定位和transform属性。将子元素设为绝对定位，使用top: 50%;将其垂直移动到父元素一半位置，再用transform: translateY(-50%);向上移动自身高度的一半，从而实现垂直居中。
最终CSS代码如下：
p {
position: relative; /* 父元素需设置为相对定位 */
background-color: rgba(255, 255, 255, 0.2); /* 使用rgba设置透明度 */
}
p img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 水平垂直居中 */
}
此方法有效解决了透明父元素包含文本时，子元素垂直居中的问题，同时保持文本位置和子元素的不透明性。
