本文讲解如何使用 css 定位与变换技术，将一张模糊背景图与一个覆盖其上的居中文本（如“warning”）同时精确居中于父容器内，解决元素并排显示而非层叠居中的常见问题。
要实现两个元素（如背景图和叠加文字）共同居中且彼此重叠，关键在于：父容器启用相对定位（position: relative），子元素启用绝对定位（position: absolute）并配合 transform: translate(-50%, -50%) 实现精准中心对齐。默认的文档流布局（如 Flexbox 的 align-items/justify-content）仅适用于同级块级元素的排列，无法让一个子元素“浮”在另一个之上并共享同一中心点。
以下是推荐的结构与样式方案：
✅ HTML 结构优化建议 ✅ 核心 CSS 规则说明 ⚠️ 注意事项与避坑指南 通过以上方法，你将获得一个结构清晰、语义正确、跨浏览器兼容且易于维护的居中叠加布局方案。
避免将 与 <div class="container">
@@##@@
<div class="centered">Warning</div>
</div>
.container {
position: relative; /* 创建定位上下文，使内部 absolute 元素以此为参考 */
width: 10em; /* 显式设定宽高，确保容器可被居中（尤其当父级为 flex 时） */
height: 10em;
margin: 0 auto; /* 水平居中（可选，若父级已用 justify-content-center 则非必需） */
}
.thumbnail {
width: 100%;
height: 100%;
object-fit: cover; /* 替代 background-image，更语义化且支持响应式缩放 */
filter: blur(8px);
-webkit-filter: blur(8px);
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 精确抵消自身宽高的一半，实现真居中 */
color: white;
font-weight: bold;
text-shadow: 0 1px 2px rgba(0,0,0,0.7); /* 提升可读性 */
z-index: 10; /* 确保文字在图片上方 */
}
更利于可访问性（alt 属性）、SEO 及 object-fit 控制；
