本文详解如何利用 css flexbox 的 `justify-content` 和 `align-items` 属性，精准实现 svg 图标在固定尺寸矩形（如导航栏、按钮等）中水平+垂直居中对齐，特别适用于左侧布局场景。
在 Web 开发中，将图标（尤其是内联 SVG）精确居中于一个矩形容器（如带背景色的 div）是常见需求。仅靠 text-align: center 无法实现垂直居中，因为它只作用于行内内容的水平对齐，且对 SVG 这类替换元素效果有限。
✅ 正确解法：Flexbox 布局
为容器设置 display: flex，再通过两个核心属性协同控制：
- justify-content: center → 水平居中（主轴方向）
- align-items: center → 垂直居中（交叉轴方向）
以下是一个完整、可直接运行的示例：
图标居中示例 Marseille, FranceSearch
? 关键注意事项：
- ✅ 必须为父容器（即 .div_2）设置 display: flex，而非仅对 SVG 或文字单独设置；
- ✅ SVG 需显式设置 width / height（或 flex-shrink: 0），避免因 Flex 自动缩放导致失真；
- ✅ 若容器内含多元素（如图标 + 文字），推荐配合 gap 属性控制间距，比 margin 更健壮；
- ⚠️ 避免滥用 text-align: center 替代 Flex 垂直居中——它对块级或替换元素无效；
- ? 进阶提示：若需响应式适配，可结合 min-width、max-width 或媒体查询动态调整 svg 尺寸。
掌握这一 Flexbox 居中模式，你就能高效、可靠地实现各类图标+文本组合在任意矩形容器中的精准居中布局，大幅提升 UI 一致性与开发效率。
