本文详解如何利用 css flexbox 的 `justify-content` 与 `align-items` 实现 svg 图标在固定尺寸矩形中的水平垂直居中（尤其适用于左对齐布局），并提供可直接运行的完整 html/css 示例及关键注意事项。
在 Web 开发中，将图标（尤其是 SVG）精确居中于一个固定宽高的矩形容器（如导航项、按钮或信息栏）是高频需求。常见的误区是仅依赖 text-align: center —— 它仅作用于行内内容的水平对齐，对垂直居中无效，且对 SVG 这类替换元素的定位控制力极弱。
✅ 正确解法：Flexbox 布局
通过为容器设置 display: flex，再配合两个核心属性，即可实现真正的二维居中：
- justify-content: center → 水平居中（主轴方向）
- align-items: center → 垂直居中（交叉轴方向）
该方案不依赖父容器是否为块级或行内元素，兼容性优秀（现代浏览器全覆盖），且代码简洁、语义清晰。
以下是完整可运行示例（已优化结构与语义）：
