text-align: center 是首选，因 默认为行内元素，其水平居中由父块级容器的 text-align 控制，轻量、兼容性好（IE6+）、语义准确、响应式友好；margin: auto 对无宽行内元素无效。
超链接（ 因为 是的。 当你需要 实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。 立即学习“前端免费学习笔记（深入）”； 居中“看起来没生效”，90% 是以下三个干扰项之一： 真正麻烦的点往往不在“怎么居中”，而在“谁才是那个父容器”——嵌套多层 <a></a>）在 <div> 中居中，本质是让行内元素水平居中 —— 直接给父 <code><div> 加 <code>text-align: center 就够了，不需要 flex、grid 或定位。
为什么
text-align: center 是首选<a></a> 默认是行内元素，它的对齐行为由父块级容器的 text-align 控制。这是最轻量、兼容性最好（IE6+ 都支持）、且语义最准确的方式。
<a></a> 会自然并排居中，适合导航条或按钮组display: block 或 inline-block，仍可继续生效（只要没改成 display: flex 等脱离文本流的模式）
margin: auto 对 <a></a> 无效？margin: auto 只对**有明确宽度的块级元素**生效。而默认的 <a></a> 是行内元素，没有宽度概念，设 margin: 0 auto 完全没反应。
display: block，就必须同时设 width（比如 width: 200px），否则 auto 无法计算左右边距display: inline-block 后，margin: auto 依然无效 —— 它只响应块级流，不响应行内流Flexbox 居中适合什么场景
<a></a> **同时水平 + 垂直居中**，或者要控制多个链接之间的间距、换行行为时，才值得上 Flexbox。
<div> 设 <code>display: flex; justify-content: center; align-items: center;，能真正把单个链接在二维空间里钉在正中
align-items: center 只影响整行盒子的垂直位置，不控制内部文字对齐 —— 还得额外加 text-align: center
flex-wrap: wrap 比纯 text-align 更易控制多链接折行布局常见失效原因和修复
<div> 没设宽度，且被其他样式（如 <code>float、position: absolute）拉出了文档流 —— 检查 computed styles 中 width 和 display
<a></a> 被显式设了 display: block 但没配 width，又误以为 margin: auto 该起作用.text-left 类覆盖了你的 text-align: center —— 用浏览器开发者工具看最终生效的样式<div> 时，<code>text-align 必须作用在**直接包裹 <a></a> 的那个块级祖先**上，隔一层就断掉。
