本文详解如何利用 css flexbox 的 `justify-content` 和 `align-items` 属性，精准实现 svg 图标在左侧固定宽高矩形容器中的水平与垂直居中对齐，避免传统 `text-align` 的局限性。
在 Web 开发中，将图标（尤其是内联 SVG）严格居中于一个矩形区域（如导航栏按钮、地址卡片或搜索框左侧）是常见需求。许多开发者尝试使用 text-align: center，但该属性仅影响行内内容的水平对齐，对垂直方向无效，且当容器内混有文本与 SVG 时，往往导致错位（如图中图标偏上或贴边）。
✅ 正确解法：Flexbox 布局
为包含图标的容器（如 .div_2）启用 Flex 布局，并同时设置两个关键属性：
- justify-content: center → 水平居中（主轴方向）
- align-items: center → 垂直居中（交叉轴方向）
这样无论容器内是纯 SVG、SVG + 文本，还是其他内联元素，都能实现真正的“十字居中”。
以下是完整可运行示例（含语义化结构与响应式友好写法）：
图标居中示例 Marseille, FranceSearch
? 关键要点说明：
- ✅ .rect 类统一应用 display: flex + justify-content: center + align-items: center，确保所有子元素（SVG + 文本）整体居中；
- ✅ SVG 设置 flex-shrink: 0 防止缩放失真；margin-right 实现图标与文字间距；
- ✅ 使用 gap 替代 margin 控制容器间距离，更符合现代布局规范；
- ✅ 添加 box-sizing: border-box 和 padding 提升点击区域与视觉舒适度；
- ⚠️ 注意：若 SVG 是通过
标签引入，请确保 img 元素设为 display: block 或 vertical-align: middle，否则可能因基线对齐产生额外空白。
掌握这一 Flexbox 居中模式，你不仅能解决左侧图标定位问题，还可复用于按钮、卡片、表单项等各类 UI 组件的精准对齐场景——简洁、可靠、无需 hack。
