text-align: center 必须作用于父容器而非 <a> 标签本身，因其仅控制块级容器内行内内容的水平对齐；<a> 默认为行内元素，需包裹在块级容器中并设 text-align: center 才能实现整体居中。
text-align: center 是最直接有效的办法，但必须作用在父容器上，而不是 <a> 标签本身。
为什么给 <a> 加 text-align: center 没用？
text-align 是控制“行内内容在块级容器中如何对齐”的属性，它只对父元素生效。把 text-align: center 写在 <a> 上，等于让链接内部的文本（比如嵌套的 <span>）居中——而链接本身仍是行内元素，默认左对齐。
常见错误写法：
<a style="text-align: center;" href="#">点我</a>
这不会让整个链接在页面中居中，只会让链接里再套一层文字时才起作用。
正确做法是：用一个块级容器包住 <a>，然后给这个容器加 text-align: center。
立即学习“前端免费学习笔记（深入）”；
- 容器必须是块级（如
<div>、<p>、<section>），不能是<span>或空标签 -
<a>默认是行内元素，无需额外设display，它会自然响应父容器的text-align - 如果父容器宽度不够（比如被
float或inline-block压缩），text-align仍会生效，但视觉上可能“没动”——先检查父容器是否真正占满预期宽度
line-height 配合 height 实现单行垂直居中
如果目标是让超链接在某个固定高度的区域里“上下+左右都居中”，比如导航栏里的按钮式链接，那就需要 height + line-height 组合。
示例（40px 高容器中单行居中）：
<div style="height: 40px; line-height: 40px; text-align: center; border: 1px solid #ccc;"> <a href="#">关于我们</a> </div>
注意前提条件：
- 容器必须有明确的
height（不能是min-height或靠内容撑开） - 链接内容必须是单行，否则
line-height: 40px会让第二行直接掉出容器底部 - 不要给
<a>设display: block，否则它会独占一行，line-height对块级元素无效 - 字体大小变化时，建议用相对单位（如
line-height: 2.5）而非像素值，避免缩放后错位
用 Flex 布局更稳妥，尤其当容器高度不固定或要兼容多状态
现代项目里，哪怕只是单行链接，也推荐用 Flex。它不依赖行高，不怕换行、缩放、图标插入，语义也更清晰。
写法很简单：
<div style="display: flex; justify-content: center; align-items: center; height: 40px; border: 1px solid #ccc;"> <a href="#">联系我们</a> </div>
关键点：
-
justify-content: center控制水平居中，align-items: center控制垂直居中 - 父容器必须有可参考的高度（
height、min-height或继承自父级），否则align-items: center无空间可居中 -
<a>默认是行内元素，在 Flex 容器中会被自动当作 flex item 处理，无需改display - IE11 支持基本没问题，但若遇到
min-height不生效，可临时换用height: fit-content或显式设height
容易忽略的细节：链接默认样式干扰居中效果
浏览器会给 <a> 加默认下划线和颜色，有时会破坏视觉居中感，尤其是用 line-height 时——下划线位置随字体基线浮动，看起来像“偏下”。
建议统一清理：
- 去掉下划线：
text-decoration: none - 重置行内盒模型：
vertical-align: middle（对齐基线，配合line-height更稳） - 确保字体大小一致：
font-size显式声明，避免继承导致高度波动 - 如果链接里混用了
<strong>或<small>，它们会改变行框高度，导致line-height失效；此时只能切 Flex
真正麻烦的不是“怎么居中”，而是“为什么看起来没居中”——多数时候是默认样式、字体渲染差异或父容器塌陷在作祟，而不是居中逻辑本身错了。
