本文详解如何使用 css flexbox 实现 svg 图标在固定宽高的左侧矩形容器中**水平垂直居中对齐**，解决 `text-align: center` 仅作用于行内内容、无法控制块级或绝对定位元素的常见误区。
在前端开发中，将图标（尤其是 SVG）精确置于矩形容器（如导航栏项、按钮或信息卡片）的正中心，是高频但易出错的布局需求。许多开发者尝试 text-align: center，却发现图标并未居中——这是因为 text-align 仅影响行内内容的水平对齐，且需父容器为块级并包含文本流；而 SVG 若作为独立元素插入（尤其未包裹在 或设置 display: inline-block），默认不响应 text-align。
✅ 正确解法：Flexbox 布局
Flexbox 提供了真正意义上的二维居中能力：justify-content: center 控制主轴（默认为水平）居中，align-items: center 控制交叉轴（默认为垂直）居中。只需将容器设为 display: flex，即可一键实现图标在矩形容器内的完美居中。
以下是一个完整、可直接运行的示例：
