如何让 CSS 父盒子中垂直居中的子盒子文本位置不变？

如何让 CSS 父盒子中垂直居中的子盒子文本位置不变？插图

如何让父盒子中的子盒子文本位置不变？

在 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 父盒子中的子盒子文本位置不变？的详细内容，更多请关注米云其它相关文章！

近期文章