如何在任意长度的模糊文本上方叠加显示文本？

问题根源 #

当前的垂直偏移来自两个核心问题：

• .text-overlay 使用 top:50% 仅将元素顶部定位到容器中点，未抵消自身高度带来的偏移
• <small> 标签自带默认边距和行高，短文本容器高度较小时，这个影响会被放大

修改后的CSS代码 #

.bubble {
  margin-block: 1.5rem;
  padding-inline: 0.35rem;
  padding-block: 0.25rem;
  border-radius: 5px;
  position: relative;
  width: fit-content;
  max-width: 25rem;
  background-color: rgb(246 246 246);
  box-shadow: 0 0, 0 0, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.blurred {
  filter: blur(3px) opacity(0.3);
}

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-overlay small {
  margin: 0;
  line-height: 1;
}

关键改动说明 #

1. 全屏覆盖+Flex居中：将 .text-overlay 定位改为 top:0; left:0 覆盖整个气泡容器，通过Flex布局的 align-items:center 和 justify-content:center 实现内部文本的精准垂直水平居中，完全适配动态变化的容器高度
2. 重置默认样式：清除 <small> 的默认边距和行高，避免浏览器自带样式干扰定位效果

效果验证 #

修改后不管是短文本还是长文本的气泡，"hidden content" 都会精准居中在模糊文本上方，不会出现偏移问题。

内容的提问来源于stack exchange，提问作者gru