本文详解如何使用 bootstrap 5 的 flex 布局与定位工具，构建「左右两张图片 + 中间居中悬浮元素（如图标、徽章或装饰圆）」的水平三栏结构，并确保标题精准对齐下方，兼顾响应式与语义化。
在 Bootstrap 5 中实现“双图并列 + 中央悬浮内容”的视觉效果，关键在于分离结构逻辑与视觉定位：左右图片应作为流式布局主体，而中间元素需脱离文档流、绝对定位于二者间隙中心——这比强行用 col-4 col-4 col-4 等分更精准、更可控。
以下是一个语义清晰、响应友好、可直接复用的完整方案：
@@##@@Title 1@@##@@Title 2+
✅ 核心要点解析：
- ✅ position-relative 应用在 .row 上，为内部 .position-absolute 元素提供定位上下文；
- ✅ top-50 start-50 translate-middle 是 Bootstrap 5 内置的现代居中组合类，替代冗余 CSS；
- ✅ 使用 col-6 而非 w-50，确保栅格系统响应式断点（如 col-md-4 可适配小屏堆叠）；
- ✅ 图片采用 img-fluid + object-fit: cover，保障缩放一致性；标题置于图片容器内，天然对齐；
- ✅ z-1 确保中央元素位于图片上方，避免被遮挡。
⚠️ 注意事项：
- 若图片宽高差异大，建议统一设置 min-height 或使用 aspect-ratio（现代浏览器支持）约束比例；
- 中央元素内容（如图标、文字）建议使用 SVG 或 Bootstrap Icons 提升清晰度与可访问性；
- 在移动端（如
该方案摒弃了浮动、负边距等过时手法，完全基于 Bootstrap 5 的 Flex + Utilities 体系，简洁、健壮、易维护——是学习响应式组件组合的理想范例。
