本文讲解如何使用 css 定位技术，将一张模糊背景图与一个居中显示的警告文字（span）共同置于父容器中央，并确保文字精确叠加在图像正中心。核心在于结合 `position: relative` 与 `position: absolute`，配合 `transform: translate(-50%, -50%)` 实现精准居中。
要实现图像与文字在父容器内水平垂直居中且文字覆盖于图像之上，关键在于建立正确的层叠上下文和定位关系。默认的文档流（如 display: flex 或 inline-block）会使元素并排或堆叠排列，无法自然实现“覆盖+居中”双重效果；而绝对定位配合相对定位容器，则能精准控制子元素位置。
✅ 正确实现步骤：
- 为父容器设置 position: relative：作为绝对定位子元素的参考边界；
- 将图像设为块级内容（推荐用 <img> 标签）：更语义化、便于尺寸控制，且避免 background-image 在缩放/居中时的不可控行为；
- 为覆盖文字添加 .centered 类：使用 position: absolute + top: 50% / left: 50% + transform: translate(-50%, -50%) 实现真正居中（兼容所有尺寸）；
- 统一容器尺寸与样式：确保 .container 明确定义宽高（如继承自外层 .thumbnail），并启用 overflow: hidden 防止溢出。
? 示例代码（精简可运行版）：
<style>
.thumbnail {
height: 10em;
width: 10em;
background-size: cover;
}
.sensitive {
filter: blur(8px);
-webkit-filter: blur(8px);
}
.container {
position: relative;
width: 10em;
height: 10em;
margin: 0 auto; /* 水平居中父容器（可选） */
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
text-shadow: 0 0 4px rgba(0,0,0,0.7);
z-index: 10;
}
</style>
<div class="folder row justify-content-md-center mt-4">
<div class="col col-md-2 d-flex justify-content-md-center">
<div class="container">
<img
class="thumbnail sensitive"
src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png"
alt="Blurred mountain background"
style="width: 100%; height: 100%; object-fit: cover;"
>
<div class="centered">Warning</div>
</div>
</div>
</div>⚠️ 注意事项：
- ❌ 避免对 background-image 元素直接绝对定位其内部 span——因 background-image 不是真实 DOM 子节点，无法参与定位流；
- ✅ 推荐使用 <img> 标签替代 div[style="background-image"]，更利于 object-fit 控制缩放、支持 alt 属性及无障碍访问；
- ? 若需响应式适配，可将 .container 的宽高改为 aspect-ratio: 1 / 1 并配合 max-width；
- ? 如需多层覆盖（如图标+文字），只需为每个绝对定位元素设置不同 z-index 即可控制层级顺序。
通过以上方法，你不仅能稳定实现“图像居中 + 文字覆盖居中”，还能保持代码语义清晰、易于维护和扩展。
