如何使用 Flexbox 居中对齐 Font Awesome 图标

2026-01-22 00:00:00 作者：聖光之護

本文详解如何通过现代 css flexbox 技术，将一组 font awesome 图标在页面中水平垂直居中显示，兼容主流浏览器且代码简洁可靠。

要让 4 个 Font Awesome 图标在页面中央（即同时水平和垂直居中），最推荐、最稳健的方案是使用 CSS Flexbox。相比传统的 text-align: center（仅水平居中）或 margin: auto（需设置宽高及块级特性），Flexbox 提供了语义清晰、行为可预测的一站式解决方案。

✅ 正确实现方式（推荐）

首先确保 HTML 结构简洁规范（已基本正确）：




  
  居中图标示例

? 关键要点说明

height: 100vh 是核心前提：.icons 容器必须拥有明确高度（如 100vh），否则 align-items: center 无法在垂直方向产生效果；
gap 替代手动 margin：更语义化、避免外边距折叠问题，且支持响应式调整；
flex-direction: column（媒体查询内）：在移动端改为纵向排列，提升小屏可用性；
不需要额外 wrapper 或 position: absolute —— Flexbox 原生支持真居中，无需 hack。

⚠️ 常见误区提醒

❌ 仅用 text-align: center：只能居中行内元素（如图标），但无法控制垂直位置；
❌ 忘记设置容器高度：若 .icons 高度为 auto，align-items: center 将无垂直居中效果；
❌ 混用 float 或 inline-block + text-align：增加复杂度，且垂直居中仍难实现；
❌ 使用过时的 display: table-cell：冗余、语义差、维护成本高。

✅ 总结

Flexbox 的 justify-content 与 align-items 组合是目前居中任意数量内联元素（包括 Font Awesome 图标）的黄金标准。只需三步：① 设置容器为 display: flex；② 指定 height（通常为 100vh）；③ 应用两个居中属性。简洁、高效、可扩展——这才是现代前端开发应有的解法。