CSS：如何将FontAwesome图标在方形容器中居中？

嘿，我懂你这闹心的情况——不同FontAwesome图标在方形（或是你设了圆角的圆形）容器里偏位，尤其是SoundCloud这种，缩容器尺寸的时候问题更明显。其实根源在于这些图标本质是字体字符，不同图标的字符宽度、基线位置天生有差异，靠传统的text-align和vertical-align很难搞定所有图标的完美居中。

给你推荐个一劳永逸的方案，用Flex布局实现绝对居中，不管图标本身的特性，都能稳稳卡在容器中心：

优化后的CSS代码 #

.fa {
  /* 核心：把图标容器转为Flex容器 */
  display: inline-flex;
  /* 水平方向居中 */
  justify-content: center;
  /* 垂直方向居中 */
  align-items: center;
  /* 保留你原有的内边距、外边距和圆角设置 */
  padding: 15px;
  margin: 15px 3px;
  border-radius: 50%;
  /* 容器宽高按你的需求调整 */
  width: 7.5px;
  height: 7.5px;
  font-size: 15px;
  text-decoration: none;
  /* 你的其他自定义样式（比如背景色、图标颜色）继续保留即可 */
}

为什么这个方案靠谱？ #

Flex布局是基于容器的物理中心对齐内部元素的，完全不依赖字体基线、字符宽度这些变量。不管是Facebook那种规整的图标，还是SoundCloud这种形状特殊的，都能精准居中，哪怕容器尺寸缩小也不会出问题。

如果你偏好传统布局的备选方案 #

要是你更习惯用老方法，也可以把图标转为块级元素，通过调整行高匹配容器高度，不过这个需要精确计算，不如Flex省心：

.fa {
  display: inline-block;
  padding: 15px;
  margin: 15px 3px;
  border-radius: 50%;
  width: 7.5px;
  height: 7.5px;
  font-size: 15px;
  text-align: center;
  /* 行高设为容器内容区高度，让垂直居中生效 */
  line-height: 7.5px;
  /* 取消默认垂直对齐，避免干扰 */
  vertical-align: top;
  text-decoration: none;
}

最后提个小细节：如果用的是FontAwesome 5及以上版本，品牌图标（比如Facebook、SoundCloud）要加.fab前缀，比如<i class="fab fa-facebook"></i>，确保图标能正确加载~

内容的提问来源于stack exchange，提问作者Fjott