footer水平居中需设width（如80%）并配合margin: 0 auto；若无效，常见原因是未设宽度、display被误改或父容器为flex/grid。贴底固定用position: fixed + flex居中最稳。
底部标签（比如 <footer></footer>、<p class="copyright"></p>）要水平居中，和普通块级元素没本质区别——关键看它是不是块级、有没有宽度、父容器是否干扰。垂直方向“到底部”是另一回事，不能靠 text-align 或 margin: 0 auto 解决。
footer 水平居中却不动？检查 width 和 display
常见错误是给 <footer></footer> 写了 margin: 0 auto，但页面毫无反应。原因通常有三个：
-
footer没设width（或max-width），浏览器无法计算左右剩余空间 -
footer被意外设成display: inline或inline-block，而父容器没配text-align: center - 父容器用了
display: flex或display: grid，直接覆盖了margin: auto行为
稳妥写法：
footer {
width: 80%;
margin: 0 auto;
max-width: 1200px;
}
注意：width: 100% 不行——没有“剩余空间”可分，auto 就失效。
让 footer 真正“贴底”且内容居中：flex 是最简方案
单纯“在页面底部”不等于“贴着视口底边”，也不等于“在父容器底部”。如果目标是固定在视口最下方（比如版权条始终在屏幕底），用 position: fixed + flex 最稳：
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: center;
padding: 12px;
background: #333;
color: #fff;
}
这里 justify-content: center 居中文本或子元素，不依赖子元素宽度，也不怕换行；position: fixed 确保它脱离文档流、始终在视口底部。
如果只是想让 footer 出现在页面内容末尾（正常文档流），但又希望它“撑满到底部”，就得靠父容器高度控制——此时 flex 仍是首选：
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
<p>main {
flex: 1;
}</p><p>footer {
text-align: center; /<em> 或用 flex </em>/
}</p>
text-align: center 在 footer 里为什么有时无效？
因为 text-align: center 只作用于它的**行内子内容**，不是让 footer 自身居中。如果你在 footer 里放了一个 <div>，又没设 <code>display: inline-block，那这个 div 会独占一行、左对齐，text-align 对它没影响。
正确做法分情况：
- 纯文字或链接：
footer { text-align: center; }直接生效 - 含多个块级子元素（如 logo + nav + copyright）：
footer { display: flex; justify-content: center; flex-wrap: wrap; } - 兼容老浏览器（IE10–）：
footer { display: table; width: 100%; } footer > div { display: table-cell; text-align: center; width: 1%; }
别在 footer 上同时写 text-align: center 和 margin: 0 auto——前者管内容，后者管自身，混用容易误判问题来源。
绝对定位 footer 到底部时，translate(-50%, -50%) 容易错位
有人用 position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); 实现水平居中，这能工作，但要注意：
- 父容器必须有
position: relative，否则left: 50%是相对于整个视口，滚动时会漂移 -
transform: translateX(-50%)只水平居中，如果还想垂直微调（比如避开 iOS 安全域），得加bottom: env(safe-area-inset-bottom) - 这种写法对响应式不友好：小屏下
width可能超限，translate会把内容切掉一部分
真正需要“精确像素级控制底部位置”的场景极少，多数时候 flex 或 fixed 更可靠。最容易被忽略的是：底部标签的 box-sizing 和 padding 是否让实际高度超出预期——尤其当用 vh 单位做高度时，多 1px 的 border 都可能破坏对齐。
