本文详解如何利用 css flexbox 的 `justify-content` 和 `align-items` 属性，精准实现 svg 图标在固定尺寸矩形（如导航栏、按钮等）中水平+垂直居中对齐，特别适用于左侧布局场景。
在 Web 开发中，将图标（尤其是内联 SVG）精确居中于一个矩形容器（如带背景色的 div）是常见需求。仅靠 text-align: center 无法实现垂直居中，因为它只作用于行内内容的水平对齐，且对 SVG 这类替换元素效果有限。
✅ 正确解法：Flexbox 布局
为容器设置 display: flex，再通过两个核心属性协同控制：
- justify-content: center → 水平居中（主轴方向）
- align-items: center → 垂直居中（交叉轴方向）
以下是一个完整、可直接运行的示例：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图标居中示例</title>
<style>
.container {
display: flex;
margin: 0 auto;
max-width: 500px;
}
.div_1, .div_2, .div_3 {
width: 161px;
height: 40px;
font-size: 14px;
display: flex; /* 启用 Flexbox */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
gap: 8px; /* 可选：图标与文字间距 */
}
.div_1 { background: #eeebeb; }
.div_2 { background: white; border: 1px solid #ddd; }
.div_3 { background: #0065fc; color: white; }
.div_2 svg {
width: 24px;
height: 24px;
flex-shrink: 0; /* 防止 SVG 在小空间中被压缩 */
}
</style>
</head>
<body>
<div class="container">
<div class="div_1"></div>
<div class="div_2">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21.25C11.853 21.2514 11.7093 21.2059 11.59 21.12C11.29 20.93 4.25 16.2 4.25 10.45C4.25 8.39452 5.06652 6.42328 6.51992 4.96987C7.97333 3.51647 9.94457 2.69995 12 2.69995C14.0554 2.69995 16.0267 3.51647 17.4801 4.96987C18.9335 6.42328 19.75 8.39452 19.75 10.45C19.75 16.2 12.75 20.93 12.41 21.12C12.2907 21.2059 12.147 21.2514 12 21.25ZM12 4.24995C10.3494 4.24463 8.7642 4.89454 7.59238 6.05699C6.42056 7.21943 5.75794 8.79939 5.75 10.45C5.75 14.66 10.54 18.51 12 19.58C13.46 18.51 18.25 14.66 18.25 10.45C18.2421 8.79939 17.5794 7.21943 16.4076 6.05699C15.2358 4.89454 13.6506 4.24463 12 4.24995Z" fill="#000000"/>
<path d="M12 12.75C11.4561 12.75 10.9244 12.5887 10.4722 12.2865C10.0199 11.9844 9.66747 11.5549 9.45933 11.0524C9.25119 10.5499 9.19673 9.99695 9.30284 9.4635C9.40895 8.93006 9.67086 8.44005 10.0555 8.05546C10.4401 7.67086 10.9301 7.40895 11.4635 7.30284C11.997 7.19673 12.5499 7.25119 13.0524 7.45933C13.5549 7.66747 13.9844 8.01995 14.2865 8.47218C14.5887 8.92442 14.75 9.4561 14.75 10C14.75 10.7293 14.4603 11.4288 13.9445 11.9445C13.4288 12.4603 12.7293 12.75 12 12.75ZM12 8.75C11.7528 8.75 11.5111 8.82331 11.3055 8.96066C11.1 9.09802 10.9398 9.29324 10.8452 9.52165C10.7505 9.75005 10.7258 10.0014 10.774 10.2439C10.8223 10.4863 10.9413 10.7091 11.1161 10.8839C11.2909 11.0587 11.5137 11.1778 11.7561 11.226C11.9986 11.2742 12.2499 11.2495 12.4784 11.1549C12.7068 11.0602 12.902 10.9 13.0393 10.6945C13.1767 10.4889 13.25 10.2472 13.25 10C13.25 9.66848 13.1183 9.35054 12.8839 9.11612C12.6495 8.8817 12.3315 8.75 12 8.75Z" fill="#000000"/>
</svg>
Marseille, France
</div>
<div class="div_3">Search</div>
</div>
</body>
</html>? 关键注意事项：
- ✅ 必须为父容器（即 .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 一致性与开发效率。
