本文详解如何利用
css
flexbox 的 `justify-content` 和 `align-items` 属性，精准实现
svg
图标在固定尺寸矩形（如导航栏、按钮等）中水平+
垂直居中
对齐，特别适用于左侧布局场景。
在 Web 开发中，将图标（尤其是内联 SVG）精确居中于一个矩形容器（如带背景色的 div）是常见需求。仅靠 text-align: center 无法实现
垂直居中
，因为它只作用于行内内容的
水平对齐
，且对 SVG 这类替换元素效果有限。
✅ 正确解法：
Flexbox 布局
为容器设置 display: flex，再通过两个核心属性协同控制：
justify-content: center → 水平居中（主轴方向）
align-items: center → 垂直居中（交叉轴方向）
以下是一个完整、可直接运行的示例：
?
关键注意事项：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
✅ 必须为
父容器
（即 .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 一致性与开发效率。
图标居中示例
Marseille, France
Search