网站社交按钮无法上下居中问题求助（附HTML/CSS代码）

核心问题分析 #

1. <center>是HTML废弃标签，现代浏览器支持有限，需用CSS实现居中
2. 行内元素默认以基线对齐，加上Font Awesome图标本身的视觉尺寸差异，导致按钮上下错位
3. 未给父容器#footer设置统一的居中布局规则

具体修复方案 #

1. 优化父容器#footer的CSS

给#footer添加flex布局，实现整体内容水平居中，同时规整两行按钮的间距：

#footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* 替代<br><br>，灵活控制行间距 */
}

2. 修正按钮的对齐与尺寸问题

调整.btn_social样式，确保图标在按钮内垂直居中，同时统一所有按钮尺寸：

.btn_social {
  font-size: 18px;
  color: #fff;
  margin: 0 20px; /* 仅保留左右margin，上下间距由父容器gap控制 */
  padding: 15px; /* 统一padding，避免左右不一致导致按钮变形 */
  border-radius: 50%;
  background: #000;
  transition: 0.4s ease-in-out;
  display: inline-flex; /* 让图标在按钮内居中 */
  align-items: center;
  justify-content: center;
  width: 48px; /* 固定宽高，确保所有按钮大小一致 */
  height: 48px;
}

.btn_social:hover {
  color: #000;
  background: #fff;
  cursor: pointer;
}

@media (max-width: 900px){
  .btn_social {
    font-size: 14px;
    margin: 0 10px;
    padding: 10px;
    width: 34px;
    height: 34px;
  }
}

3. 清理HTML冗余代码

去掉<br><br>，用父容器的gap控制行间距，可选给每行按钮加容器让结构更清晰：

<div id="footer">
  <div class="social-row">
    <a class="btn_social" href="https://discord.gg/DvXbGPdZ85"><i class="fas fa-home"></i></a>
    <a class="btn_social" href="mailto:help@alphatron.games"><i class="fas fa-at"></i></a>
    <a class="btn_social" href="https://twitter.com/AlphatronGames"><i class="fa fa-laptop-code"></i></a>
    <a class="btn_social" href="https://www.instagram.com/alphatrongames/"><i class="fa fa-headset"></i></a>
  </div>
  <div class="social-row">
    <a class="btn_social" href="https://discord.gg/DvXbGPdZ85"><i class="fab fa-discord"></i></a>
    <a class="btn_social" href="mailto:help@alphatron.games"><i class="fas fa-at"></i></a>
    <a class="btn_social" href="https://twitter.com/AlphatronGames"><i class="fab fa-twitter"></i></a>
    <a class="btn_social" href="https://www.instagram.com/alphatrongames/"><i class="fab fa-instagram"></i></a>
  </div>
</div>

效果说明 #

• 父容器通过flex垂直布局，确保两行按钮整体水平居中
• 按钮设置固定宽高+inline-flex，让图标在按钮内完美居中，同时所有按钮尺寸统一
• 用gap替代<br>，行间距更易控制，布局符合现代CSS规范

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