footer文字加text-align: center仍偏左，因该属性仅作用于块级容器内的行内内容，常见原因包括body/html存在默认边距、父容器设max-width或margin: 0 auto导致footer未占满整行，或子元素为块级div需改用flex布局或inline-block。
footer文字水平居中为什么加了text-align: center还偏左
因为text-align: center只对块级容器内部的行内内容生效，而你可能没意识到“谁才是真正的容器”。常见干扰源有三个：
– body或html自带默认margin或padding（尤其用过 Normalize.css 后常漏清）
– 包裹footer的父容器设了max-width或margin: 0 auto，导致footer实际宽度不足整行
– footer里放了多个div子块，它们是块级元素，text-align对其无效，得改用display: flex或inline-block
绝对定位的footer怎么在底部水平居中
用position: absolute时，别依赖margin: 0 auto——它需要固定宽度且左右为0才起作用，但易受滚动条缩窄影响。更稳的做法是：
– 加bottom: 0和left: 50%，再配transform: translateX(-50%)
– 或直接设width: 100vw（比100%更能防滚动条导致的宽度塌陷）
– 别同时写top和bottom，浏览器会忽略其中一个
让footer始终贴在页面最底部（不遮内容）
position: fixed看着快，但会让footer脱离文档流，正文滚动时直接从它下面穿过去。真要“粘底”，必须保持它在文档流内：
– 给body加display: flex; flex-direction: column; min-height: 100vh
– 主内容区域（如main）设flex: 1，不能用普通div替代
– footer必须是body的最后一个直接子元素，顺序错一个就失效
– 若需兼容 IE11，把flex: 1换成margin-top: auto放在footer上
移动端页脚链接排成一列而不是挤成横条
问题根子在flex-wrap: nowrap（Flex 默认行为）。光设display: flex和width: 33.333%没用：
– 包裹链接的容器（比如.footer-links）必须显式加flex-wrap: wrap
– 子项别用width，改用flex-basis: 30%，Flex 会自动处理像素舍入误差
– 在@media (max-width: 768px)里设flex-direction: column或flex-basis: 100%
– 避免用float或inline-block模拟多列，响应式和语义都难维护
text-align: center就是最优解；一旦开始拆栏目、分列、定高、垂直居中，就得切到 Flex 或 Grid，不能再指望一个 CSS 属性包打天下。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
