text-align: center 必须作用于 a 标签的父块级容器才能使链接文字居中，因为该属性只对子元素生效；若父容器宽度不足，还需配合 margin: 0 auto 实现容器自身居中。
直接给 a 标签加 text-align: center 无效
很多人试过在 CSS 里写 a { text-align: center; }，发现链接文字根本没居中。这是因为 text-align 是**父容器的属性**，它只对子元素中的行内内容起作用，而 a 本身是行内元素，不能靠自己控制自己的水平位置。想让它居中，必须操作它的**父级块容器**。
最可靠的做法：用 text-align: center 控制父容器
适用于文章段落（p）、文章容器（article、div）等块级上下文。只要所有链接都在这些容器里，一条规则就能覆盖：
- 确保链接所在的父元素是块级元素（比如
p、section、div） - 给该父元素设置
text-align: center; - 如果父元素宽度不满屏（比如加了
max-width: 800px），记得同时设margin: 0 auto;让它自身也居中
示例：
<article style="max-width: 720px; margin: 0 auto;"> <p style="text-align: center;">欢迎访问 <a href="/about">关于我们</a> 页面。</p> <p style="text-align: center;">更多详情请查看 <a href="/contact">联系方式</a>。</p> </article>
如果链接散落在不同层级或需要全局生效
比如 CMS 输出的 HTML 不可控，a 可能嵌套在 span、strong 甚至无包裹标签里，此时不能依赖父容器统一控制。可行方案只有两个：
立即学习“前端免费学习笔记（深入）”；
- 把所有含链接的段落/容器统一加一个类，如
class="link-centered"，再写.link-centered { text-align: center; } - 用 JavaScript 批量查找并包裹：遍历所有
a，对每个找到的a，用wrap()或insertAdjacentElement套一层div并设text-align: center——但会改变 DOM 结构，影响语义和样式继承，慎用
不推荐用 display: block; margin: 0 auto; 单独处理 a：这会让每个链接独占一行，破坏段落流；且仍需显式设 width，否则无效。
Flexbox 方案只适合独立链接块，不适合正文内联链接
有人尝试给 a 加 display: flex; justify-content: center;，结果链接变块级、换行、间距错乱。这不是正文内联链接的设计场景。Flex 居中适合的是「一个按钮」「一个卡片链接」这类独立组件，不是段落中穿插的 <a>点击这里</a>。
真正容易被忽略的一点：居中效果是否“视觉上成立”，取决于父容器有没有撑开足够宽度。如果父容器是 div 但没设 width 或 max-width，它默认 100% 宽，text-align: center 虽然生效，但你感觉不到“居中”——因为文字本来就在整行中间。这时候要先确认容器实际渲染宽度。
