text-align: center 是首选，因 默认为行内元素，其水平居中由父块级容器的 text-align 控制，轻量、兼容性好（IE6+）、语义准确、响应式友好；margin: auto 对无宽行内元素无效。

超链接（）在

中居中，本质是让行内元素水平居中 —— 直接给父

加 text-align: center 就够了，不需要 flex、grid 或定位。

为什么 text-align: center 是首选

因为 默认是行内元素，它的对齐行为由父块级容器的 text-align 控制。这是最轻量、兼容性最好（IE6+ 都支持）、且语义最准确的方式。

• 不依赖高度、宽度或定位上下文，响应式友好
• 多个连续 会自然并排居中，适合导航条或按钮组
• 如果后续加了 display: block 或 inline-block，仍可继续生效（只要没改成 display: flex 等脱离文本流的模式）

margin: auto 对 无效？

是的。margin: auto 只对**有明确宽度的块级元素**生效。而默认的 是行内元素，没有宽度概念，设 margin: 0 auto 完全没反应。

• 若强行改成 display: block，就必须同时设 width（比如 width: 200px），否则 auto 无法计算左右边距
• 改成 display: inline-block 后，margin: auto 依然无效 —— 它只响应块级流，不响应行内流
• 这种绕路写法容易引发意外换行或垂直对齐问题（比如 baseline 对齐导致底部留空）

Flexbox 居中适合什么场景

当你需要 **同时水平 + 垂直居中**，或者要控制多个链接之间的间距、换行行为时，才值得上 Flexbox。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 父
  设 display: flex; justify-content: center; align-items: center;，能真正把单个链接在二维空间里钉在正中
• 但注意：如果链接文字换行，align-items: center 只影响整行盒子的垂直位置，不控制内部文字对齐 —— 还得额外加 text-align: center
• 移动端小屏下，flex-wrap: wrap 比纯 text-align 更易控制多链接折行布局

常见失效原因和修复

居中“看起来没生效”，90% 是以下三个干扰项之一：

• 父
  没设宽度，且被其他样式（如 float、position: absolute）拉出了文档流 —— 检查 computed styles 中 width 和 display
• 被显式设了 display: block 但没配 width，又误以为 margin: auto 该起作用
• CSS 优先级冲突，比如外层框架（如 Bootstrap）的 .text-left 类覆盖了你的 text-align: center —— 用浏览器开发者工具看最终生效的样式

真正麻烦的点往往不在“怎么居中”，而在“谁才是那个父容器”——嵌套多层

时，text-align 必须作用在**直接包裹 的那个块级祖先**上，隔一层就断掉。