text-align: center必须作用于父容器而非标签本身，因为该属性仅控制块级容器内行内内容的水平对齐，作为行内元素不接受自身text-align；直接设置无效，且若转为display: block却未设宽度，则撑满父容器导致居中失效。
text-align: center 就够了，但必须作用在超链接的父容器上，不是 <a> 标签本身。
为什么直接给 <a> 加 text-align: center 没用？
因为 <a> 默认是行内元素，text-align 是块级容器用来控制其内部行内内容对齐的属性——它不作用于自己。你给一个 <a> 设 text-align，就像给一个单词设“段落对齐”，浏览器根本无视。
常见错误现象：a { text-align: center; } 写完发现链接还是左贴边；或者加了 display: block 却忘了设宽度，结果它撑满整行，“居中”就失去了意义。
- 正确做法：把
<a>包进一个<div>、<p>或<nav>，然后给这个父容器加text-align: center - 如果父容器是 flex 容器（比如
display: flex），text-align会被忽略，此时该用justify-content: center - 若需响应式自适应（比如小屏时文字换行、大屏时单行居中），确保父容器没有固定
width，用max-width或百分比更稳妥
<a> 自身需要居中（比如按钮式链接）怎么办？
这时你不是想“让链接里的文字居中”，而是想“让整个链接块在页面里居中”，那就得把它变成块级或弹性子项。
立即学习“前端免费学习笔记（深入）”；
两种主流做法：
- 加
display: block或display: inline-block，再配合父容器的text-align: center——简单直接，兼容性好 - 父容器设
display: flex+justify-content: center，<a>保持默认行内行为也照样居中，且自动适配文字长度变化 - 避免用
margin: 0 auto单独给<a>，除非你明确设置了width或max-width；否则它会按内容宽度计算，而超链接宽度随文字动态变化，auto外边距可能失效
文字长度变化时，居中偏移或跳动怎么防？
纯文字链接在不同长度下视觉重心其实会微变，尤其字体非等宽时。这不是 bug，是渲染特性。要稳住视觉中心：
- 给父容器设固定
line-height和height（如height: 48px; line-height: 48px;），再配text-align: center，能锁住单行垂直位置 - 如果链接支持多行（比如响应式断行），改用 flex 布局：
display: flex; align-items: center; justify-content: center;，它对多行文本的垂直居中更鲁棒 - 慎用
transform: translateX(-50%)类手动微调——一旦文字长度变，偏移量就得重算，不可维护
真正“自适应文字长度”的居中，靠的是布局机制本身不依赖固定尺寸，而不是靠 JS 测量宽度再重设样式。flex 和 text-align 都是声明式方案，只要结构合理，增删几个字都不会破掉居中效果。
