新手求助：如何使footer文本垂直居中？

安全阿岳

2026-5-15

嘿，作为前端过来人，太懂这种小细节卡壳的感觉了！你现在的问题是文字只实现了水平居中，但垂直方向还停在顶部，其实只需加一行或几行简单的CSS就能搞定，给你两个适合新手的方案，选哪个都行：

方案1：行高法（最适合单行文字）

这个方法最直接，因为你的footer高度是固定的90px，只需要把文字的行高设置成和footer高度一致，单行文字就会自动垂直居中：

修改后的CSS代码：

footer {
  text-align: center;
  color: #FFF;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 90px;
  background-color: #464646;
  line-height: 90px; /* 新增这行，和height值一致 */
}

优点：代码最少，上手快；缺点：如果以后footer里要加多行文字，行高会导致文字重叠，这时候就换方案2。

方案2：Flexbox布局法（更灵活，推荐学习）

Flexbox是现代前端的主流布局方式，不仅能轻松实现垂直+水平居中，就算以后footer内容变复杂（比如加图标、多行文字）也能完美适配，新手早点接触也很有好处：

修改后的CSS代码：

footer {
  text-align: center;
  color: #FFF;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 90px;
  background-color: #464646;
  display: flex; /* 开启Flex布局 */
  align-items: center; /* 垂直方向居中 */
  justify-content: center; /* 水平方向居中（替代text-align也可以） */
}