最稳妥的做法是给footer直接设置text-align: center，因其作为块级元素天然支持该属性，兼容ie6且轻量无冲突；仅当需垂直居中或固定高度时才启用flex布局。
页脚版权信息居中，最稳妥的做法是用 footer 套一层容器 + text-align: center，而不是依赖 Flexbox 或绝对定位——除非你同时要控制高度或做复杂对齐。
只让文字居中：用 text-align 最直接
多数页脚只需版权文字水平居中，不需要垂直居中或固定高度。这时候 text-align: center 是最轻量、兼容性最好、也最不容易出错的方式。
-
footer本身是块级元素，天然占满父容器宽度，加text-align: center就能居中文本 - 避免在
footer上误加display: flex后又忘记设justify-content，导致文字靠左 - 如果页脚里还有链接（比如
© 2026 MySite. @#@#@#@#@#@#@#@#@#@0），text-align依然生效，无需额外处理内联元素 - 不要给
footer设width再配margin: 0 auto——这是针对「定宽块容器」的居中法，对纯文本反而多余且易冲突
页脚有固定高度时，必须用 Flexbox 垂直居中
当你明确设置了 height（比如 height: 60px），单靠 text-align 只能水平居中，文字会贴着顶部。此时必须引入 Flexbox。
- 给
footer加display: flex和align-items: center，才能让文字在设定高度内垂直居中 - 如果页脚里有多个元素（如 logo + 版权 + 社交图标），用
justify-content: space-between或center控制水平分布 - 别漏掉
box-sizing: border-box——否则 padding 会让实际高度超出预期，尤其在移动端 - 避免在
footer上同时用line-height模拟垂直居中：它对多行文本失效，且和 padding 冲突
常见错误：用 margin: 0 auto 给 footer 居中
margin: 0 auto 对 footer 无效，除非你把它变成定宽块元素——但这违背页脚语义和响应式原则。
-
margin: 0 auto要求元素有明确width，而页脚通常应撑满容器宽度（width: 100%） - 强行设
width: 960px; margin: 0 auto会导致小屏下内容溢出或左右留白 - 如果看到页脚“居中失败”，先检查是否误把
footer包在了另一个居中容器里（比如外层#wrapper已经margin: 0 auto），造成嵌套干扰 - 浏览器 DevTools 里看 computed 样式，确认
footer的width真的是auto还是被其他规则覆盖成了固定值
真正容易被忽略的点是：页脚是否需要响应式换行。比如在手机上，一长串版权文字+多个链接挤在一起，text-align: center 仍有效，但得配合 white-space: normal 和合理 padding，否则文字可能被截断或撑破布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
