text-align: center 对 标签自身无效，因其为行内元素，该属性仅作用于父容器内的行内内容对齐；正确方法是给父容器设 text-align: center 或用 display: flex + justify-content: center 实现 水平居中。
用 text-align: center 居中 <a></a> 标签本身没用
因为 <a></a> 默认是行内元素，text-align 对它不起作用——它只影响其父容器内的**行内内容对齐方式**，而不是让 <a></a> 自己“在父容器里水平居中”。常见错误是直接给 <a></a> 加 text-align: center 或 margin: 0 auto（后者对行内元素无效）。
正确做法是让父容器控制对齐：
- 把
<a></a>包进一个<div> 或 <code><footer></footer>等块级容器里 - 给这个父容器设
text-align: center - 确保
<a></a>没有浮动、绝对定位或display: inline-block以外的 display 值干扰布局
更稳妥：用 flex 实现居中（推荐）
Flex 布局不依赖文本对齐，语义清晰且兼容性足够（IE10+）。适用于页脚固定、悬浮按钮等场景：
<div style="display: flex; justify-content: center;"> <a href="#top" style="margin-top: 16px;">返回顶部</a> </div>
关键点：
立即学习“前端免费学习笔记（深入）”；
-
justify-content: center控制主轴（默认水平）居中 - 如果父容器高度受限或需要垂直居中，加
align-items: center - 避免给
<a></a>设float或position: absolute，否则会脱离 flex 流
如果要固定在右下角并居中水平位置
常见于“悬浮返回顶部”按钮。此时用 position: fixed + left: 50% + transform: translateX(-50%) 是最可靠方案：
<a href="#top" style="position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 100;">↑</a>
注意：
- 不能只靠
left: 50%，否则是容器左边缘到屏幕中心，不是元素自身居中 -
transform: translateX(-50%)把元素向左拉回自身宽度的一半 - 务必加
z-index，否则可能被其他内容遮挡
别忘了锚点本身要存在
如果点击后页面不动，大概率是页面顶部缺了对应 id 的锚点：
- 在
开头或<header></header>上加id="top"（或任意你 href 指向的值） - 例如：
<header id="top"></header>，而非<div id="top"> 却藏在很深的嵌套里导致滚动不精准 <li>现代浏览器支持 <code>scroll-behavior: smooth在html或body上启用平滑滚动
居中只是视觉问题，但锚点缺失会让整个功能失效——这点比居中方式更容易被忽略。
