如何使Font Awesome图标在div中居中？解决图标偏移问题

问题分析 #

图标偏移的核心原因是未给单个按钮容器设置内部元素的精准居中规则，仅在父容器.buttons上设置的line-height等属性无法适配所有形状的Font Awesome图标（比如骰子、代码图标本身非正圆形，与容器的对齐基准线不一致）。另外你的CSS中.button的padding属性缺少冒号，属于语法错误，会导致该属性失效。

修复方案 #

修改.button的CSS，采用Flex布局实现内部图标的精准居中，同时修正语法错误：

body {
  background-color: #333;
  font-size: 1.5em;
  padding: 0;
  /* 让body占满视口高度，确保按钮整体垂直居中在屏幕 */
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.buttons {
  display: flex;
  gap: 25px;
}

.button {
  /* 修正padding的语法错误 */
  padding: 5px;
  color: black;
  height: 50px;
  width: 50px;
  border: 15px solid #2b2b2b;
  background-color: #2b2b2b;
  border-radius: 100%;
  transition: all ease-in-out 0.5s;
  /* 关键：用Flex布局让内部图标水平+垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

HTML代码保持不变：

<div class="buttons">
  <div class="button"><i class="fa fa-dice fa-2xl"></i></div>
  <div class="button"><i class="fa fa-code fa-2xl"></i></div>
  <div class="button"><i class="fa fa-smile fa-2xl"></i></div>
</div>

方案说明 #

• Flex布局的justify-content: center和align-items: center可以让内部元素在水平、垂直方向都精准居中，不受图标本身形状、基准线的影响。
• 修正padding的语法错误，确保内边距属性正常生效。
• 移除原代码中多余的line-height、float: center（float无center取值）等无效属性，简化布局逻辑。

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