如何在父容器中居中两个重叠的 div 元素（图像与文字叠加）

本文详解如何使用 css 定位与变换技术，将一张模糊背景图与一个居中覆盖的文字提示（如“warning”）同时精确居中于父容器内，并实现层叠显示。

要实现两个元素（如背景图和覆盖文字）在父容器中水平垂直居中且彼此重叠，关键在于合理组合 position: relative 与 position: absolute，并配合 transform: translate(-50%, -50%) 进行像素级精准居中。

✅ 正确结构与样式逻辑

首先，父容器需设为 position: relative —— 这为内部绝对定位子元素提供定位参考系；
其次，覆盖层（如

Warning）应设为 position: absolute，并通过 top: 50%; left: 50% 将其左上角锚定至父容器中心，再用 transform: translate(-50%, -50%) 将自身中心点对齐该锚点，从而真正居中。

以下是完整、可直接运行的代码示例：

  
    
    
      
      @@##@@
      
      Warning
    
  

⚠️ 注意事项与最佳实践

• 避免使用 background-image 配合 absolute 文字：原问题中 .thumbnail 是纯背景容器，无内容流，导致 span 默认以行内方式排布在右侧。改用 标签不仅提升可访问性，也更易控制尺寸与滤镜。
• 务必设置父容器 position: relative：否则 absolute 子元素会相对于最近的定位祖先（甚至 ）定位，造成偏移。
• 慎用 align-middle 类：Bootstrap 的 align-middle 仅作用于行内/表格单元格元素，对 div 布局无效；此处应依赖 CSS 定位而非对齐类。
• 响应式兼容性：若需适配不同屏幕，建议将 .container 的宽高设为响应式单位（如 --thumb-

  

  size: 10rem），并在媒体查询中调整。
• 可访问性增强：为图片添加 alt 属性，对警告文字补充 aria-live="polite" 或 role="alert"（如属重要提示）。

通过以上方法，你不仅能解决“元素重叠不居中”的常见布局陷阱，还能构建出结构清晰、语义正确、易于维护的现代 CSS 组件。