footer文字水平居中直接用text-align: center最稳妥，因footer是块级元素，该属性专管其内部行内内容排列；错误做法包括写在span上、与flex混用或误用margin: 0 auto。
footer文字水平居中，直接给footer加text-align: center就行，99%的场景下这是最稳、最轻量、兼容性最好的做法。
为什么text-align: center对footer有效
因为footer是块级元素，而text-align的作用对象正是“块级容器内的行内内容”——比如版权文字、a链接、span等。它不改变footer自身位置，只管里面文字怎么排。
常见错误包括：
- 把
text-align: center写在span或a这类行内元素上——无效，它只对块级父容器起作用 - 同时给
footer设了display: flex和text-align: center——两者逻辑冲突，justify-content会覆盖text-align的水平效果 - 用
margin: 0 auto试图居中文字本身——除非文字被包进一个明确width且display: block的容器里，否则完全没反应
什么时候不能只靠text-align
当你要解决的不是“文字左右居中”，而是以下问题时，text-align就力不从心了：
- 文字在
footer里上下+左右都居中（比如固定高度的全屏底栏）→ 需要display: flex+justify-content: center+align-items: center，且父容器要有明确高度 -
footer内要三栏并排（logo｜版权｜备案号）→ 必须用flex或grid，text-align只能控制每栏内部文字，无法控制栏间布局 - 项目需兼容IE8及更老浏览器 →
text-align: center照常工作，但flex必须降级（IE10才支持display: -ms-flexbox）
footer语义和样式分离的实操建议
别把样式硬写在footer标签里，哪怕只是text-align：
- 用class代替内联style：
<footer class="site-footer"></footer>，然后在CSS里统一定义.site-footer { text-align: center; padding: 1rem 0; } - 如果页脚含多个语义区块（如
<address></address>、<p></p>、<nav></nav>），text-align仍可继承生效，但避免在子元素上重复设置 - 移动端响应式中，
text-align比固定width+margin: 0 auto更可靠——文字长度不确定时，后者容易换行或溢出
真正容易被忽略的是：很多开发者一看到“居中”就条件反射写flex，但对纯文本页脚来说，text-align才是零成本、零副作用、全浏览器兜底的首选；只有当你开始动布局结构时，才需要考虑更重的方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
