本文详解如何利用 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 + 文本，还是其他内联元素，都能实现真正的“十字居中”。
以下是完整可运行示例（含语义化结构与响应式友好写法）：
