本文详解如何使用 bootstrap 5 的 flex 布局与定位工具，构建「左右两张图片 + 中间居中悬浮元素（如图标、徽章或装饰圆）」的水平三栏结构，并确保标题精准对齐下方，兼顾响应式与语义化。
在 Bootstrap 5 中实现“双图并列 + 中央悬浮内容”的视觉效果，关键在于分离结构逻辑与视觉定位：左右图片应作为流式布局主体，而中间元素需脱离文档流、绝对定位于二者间隙中心——这比强行用 col-4 col-4 col-4 等分更精准、更可控。
以下是一个语义清晰、响应友好、可直接复用的完整方案：
<div class="container mt-5">
<!-- 图片与中央元素容器（相对定位为绝对定位提供参照） -->
<div class="row position-relative mx-0">
<!-- 左图区域：占 50% 宽度，居中对齐内容 -->
<div class="col-6 p-0 d-flex flex-column align-items-center">
<img src="image1.jpg" class="img-fluid rounded" alt="Left image" style="max-height: 300px; object-fit: cover;">
<div class="mt-2 fw-bold text-dark">Title 1</div>
</div>
<!-- 右图区域：同左图，保持对称 -->
<div class="col-6 p-0 d-flex flex-column align-items-center">
<img src="image2.jpg" class="img-fluid rounded" alt="Right image" style="max-height: 300px; object-fit: cover;">
<div class="mt-2 fw-bold text-dark">Title 2</div>
</div>
<!-- 中央悬浮元素：绝对定位，精确居中于 row 中心 -->
<div class="position-absolute top-50 start-50 translate-middle z-1">
<div class="bg-primary rounded-circle d-flex align-items-center justify-content-center"
style="width: 80px; height: 80px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
<span class="text-white fw-bold fs-4">+</span>
</div>
</div>
</div>
</div>✅ 核心要点解析：
- ✅ 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 提升清晰度与可访问性；
- 在移动端（如 <576px），可添加 d-md-flex 控制隐藏中央元素，改用垂直布局提升可用性。
该方案摒弃了浮动、负边距等过时手法，完全基于 Bootstrap 5 的 Flex + Utilities 体系，简洁、健壮、易维护——是学习响应式组件组合的理想范例。
