text-align: center 必须写在父容器上，因为它是容器级属性，只作用于内部行内内容；在 flex 容器中失效，需用 justify-content 和 align-items 控制居中。
行内超链接（<a></a>）默认是 inline 元素，不能直接用 margin: 0 auto 居中，必须靠父容器控制——最简单有效的办法，就是给它的**父元素加 text-align: center**。
为什么 text-align: center 要写在父容器上，而不是 <a></a> 自己？
因为 text-align 是一个**容器级属性**，它只作用于该元素内部的行内内容（包括 <a></a>、<span></span>、文本等），对自身没意义。给 <a></a> 加 text-align: center 完全无效。
- 错误写法：
<a href="#" style="text-align: center">点击这里</a>→ 无任何居中效果 - 正确写法：
<div style="text-align: center"><a href="#">点击这里</a></div> - 如果父容器已经是块级元素（如
<header></header>、<nav></nav>、<section></section>），直接在它的 CSS 规则里加text-align: center即可
<a></a> 在 flex 容器里为什么 text-align 失效？
一旦父容器设了 display: flex，它的子元素就变成 flex 项目，text-align 对它们不再起作用——此时居中逻辑由 justify-content 和 align-items 控制。
- 若父容器是
display: flex，想让<a></a>水平居中，应写：justify-content: center - 若还想垂直居中，需同时加：
align-items: center，且父容器要有明确高度（如min-height: 60px） - 注意：
<a></a>本身无需改display，flex 下它自动成为 flex item
想让多个 <a></a> 并排居中，但又不希望它们挤成一行？
这是常见误判点：很多人以为“多个链接居中”就得每个都加 text-align，其实关键在**父容器的 display 类型和子项排列方式**。
立即学习“前端免费学习笔记（深入）”；
- 若希望它们横向并排、整体居中：父容器设
text-align: center，每个<a></a>设display: inline-block（避免空格换行影响间距） - 若希望它们纵向堆叠、整体居中：父容器设
text-align: center+display: flex; flex-direction: column; justify-content: center; - 避免踩坑：不要给
<a></a>加float: left后再试图居中——float 元素脱离文档流，text-align对它无效
真正容易被忽略的是：居中行为始终由**父容器的布局上下文**决定，不是 <a></a> 自身能“主动居中”的。哪怕只是加个 text-align: center，也要确认父容器没被 display: flex 或 display: grid 覆盖掉这个能力——否则你会花十分钟调试，最后发现只是少删了一行 CSS。
