如何通过Flexbox技术精确地将图标放置在左侧矩形容器中央？

本文共计1314个文字，预计阅读时间需要6分钟。

原文：

在前端开发中，将图标（尤其是 SVG）精确置于矩形容器（如导航栏项、按钮或信息卡片）的正中心，是高频但易出错的布局需求。许多开发者尝试 text-align: center，却发现图标并未居中——这是因为 text-align 仅影响行内内容的水平对齐，且需父容器为块级并包含文本流；而 SVG 若作为独立元素插入（尤其未包裹在 <span> 或设置 display: inline-block），默认不响应 text-align。

✅ 正确解法：Flexbox 布局
Flexbox 提供了真正意义上的二维居中能力：justify-content: center 控制主轴（默认为水平）居中，align-items: center 控制交叉轴（默认为垂直）居中。只需将容器设为 display: flex，即可一键实现图标在矩形容器内的完美居中。