text-align: center必须作用于包含超链接的父容器，而非标签本身；它仅居中父容器内的行内内容（如文字、图片），对自身定位无效——这是最常被误解的一点。
超链接本身不会“居中”，真正需要居中的，是包裹 <a> 的容器，或者 <a> 内部的行内内容（比如文字或图片）。所谓“链接不居中”，90% 是误判了作用对象或忽略了布局前提。
为什么给 <a> 加 text-align: center 没用
text-align 是父容器的属性，不是 <a> 自身的。直接写在 <a> 标签上（比如 <a style="text-align:center">首页</a>）完全无效——它只对子元素起作用，而 <a> 里通常只有文字，没有可被居中的“子块”。
- 正确位置：必须写在
<a>的**父元素**上，例如<div style="text-align:center"><a href="#">首页</a></div> - 前提条件：父容器得有可计算宽度（
width或max-width），否则text-align无参照，computed width 为auto或0px时就静默失效 - 干扰项：父容器若设了
float、display: flex或position: absolute，text-align会直接被绕过
margin: 0 auto 对 <a> 不生效的硬性条件
<a> 默认是行内元素，margin: 0 auto 对它完全不起作用——和 <span> 或普通文字一样，左右 margin 不会触发居中逻辑。
- 必须先让它变成块级：加
display: block或display: inline-block - 必须有明确宽度：仅
max-width: 100%不够，浏览器无法据此分配“剩余空间”；需配合width: 200px或width: fit-content - 父容器不能接管布局：如果父容器是
display: flex，margin: auto行为会被忽略，此时应改用justify-content: center
Flex 布局中 justify-content: center 看似写了却不居中
这不是 CSS 写错了，而是 Flex 的“启动三要素”没凑齐：父容器必须同时满足 display: flex、主轴方向有可计算尺寸（通常是宽度）、且子元素未脱离文档流。
立即学习“前端免费学习笔记（深入）”；
- 检查父容器 computed
width：如果是auto或0px，说明它塌陷了（比如内部只有浮动子项，或被position: absolute拉走） - 确认
<a>没被设float、position: absolute或display: contents，否则它已不算 flex item - 避免在
<a>内混用换行/空格：HTML 中的空白符会被当作 text node 参与排列，可能造成视觉偏移
锚点链接（href="#section"）点击后页面不滚动？
这和“居中”无关，但常被误认为样式问题。浏览器对锚点的处理是纯 DOM 查找+滚动，不经过 CSS 渲染管线。
- 目标元素必须存在且
id完全匹配（大小写敏感、不能有空格或特殊字符） - 不要用
class代替id：href=".section"是无效的，浏览器只认#id - 动态渲染内容（如 React/Vue 页面）需确保锚点元素在 URL hash 解析前已挂载到 DOM；否则查找失败，浏览器静默跳过
- 固定定位导航栏会遮挡锚点目标：给目标元素加
scroll-margin-top（如scroll-margin-top: 60px）可预留滚动偏移
最容易被忽略的是：居中行为永远依赖上下文。没有宽度约束的父容器、脱离文档流的子元素、被更高优先级规则覆盖的 display 值——这些都不是“样式没写对”，而是布局前提根本没成立。调试时先看 computed styles 里的 display 和 width，比反复改 text-align 有效得多。
