如何在透明父盒子内垂直居中子盒子，并保持文本位置不变？

让子盒子在透明父盒子内垂直居中，文本位置不变

我们在 HTML 中有一个包含文本的父盒子

。现在我们需要添加一个子盒子，让它垂直居中，同时保持文本位置不变。并且，父盒子是透明度为 0.2 的，而子盒子是不透明的。

要实现这个效果，我们可以使用 CSS 中的 position 和 transform 属性。

1. 绝对定位子盒子：我们使用 position: absolute; 将子盒子设置为绝对定位，这样它就可以相对于父盒子进行定位。
2. 垂直居中子盒子：使用 top: 50%; 将子盒子定位到其父盒子的垂直中间。
3. 向上移动子盒子半高：为了将子盒子实际上对齐文本，我们使用 transform: translateY(-50%); 将其向上移动其自身高度的一半。
4. 不透明子盒子：将子盒子的 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;
}

以上就是如何在透明父盒子内垂直居中子盒子，并保持文本位置不变？的详细内容，更多请关注其它相关文章！