text-align: center需加在父容器上才能让内文字水平居中，因该属性仅作用于块级父元素内的行内内容；给自身设此属性无效。
超链接文字居中：用 text-align 最直接
如果只是让一个 <a></a> 标签里的文字在父容器内水平居中，不需要动布局、不涉及垂直对齐，text-align: center 就够了——它作用于块级父容器，让所有内联子内容（包括 <a></a>）整体居中。
常见错误是给 <a></a> 自己加 text-align，但 <a></a> 默认是内联元素，text-align 对它无效；必须加在它的父级（比如 <p></p>、<div> 或 <code><header></header>）上。
- 父容器要是块级元素（
<div>、<code><p></p>、<nav></nav>等），且未设置float或display: inline - 不要同时设
margin: 0 auto——那是让块级元素自身居中，和文字居中不是一回事 - 如果父容器有 padding 或 border，居中效果仍成立，但视觉中心会包含这些区域
- 统一父容器的
line-height（如line-height: 1.5），再给<a></a>显式设vertical-align: baseline或middle - 若链接和文字混排在一行（如
<p>正文内容 <a href="#">跳转链接</a></p>），优先用vertical-align: middle避免基线漂移 - 避免给
<a></a>单独设height或padding-top/bottom，否则会破坏行高计算 - 给父容器设
display: flex、flex-direction: column、justify-content: center（垂直居中）和align-items: center（水平居中） - 此时
<a></a>可以保持默认display: inline，也可以加display: block防止意外换行 - 注意：IE11 对
flex的min-height支持有问题，若容器高度靠min-height维持，需额外测试
超链接与上方文字“上下对齐”：本质是行内基线对齐问题
当你说“超链接与上方文字对齐”，大概率是指它们在同一行、但视觉高度不一致（比如链接带下划线、字号略小、或用了不同字体），导致看起来“错位”。这不是居中问题，而是 vertical-align 控制的行内对齐。
<a></a> 和普通文本默认都是 vertical-align: baseline，但下划线、字体度量差异会让基线位置实际不重合。解决方法：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
响应式场景下，flex 布局更可控
如果“上方文字”和“超链接”是两个独立块（比如标题 + 下方按钮式链接），需要它们在垂直方向上也对齐居中，display: flex 是现代首选。
关键不是让链接自己居中，而是让整个容器（含文字和链接）作为 flex 项目被统一处理：
别踩 margin: auto 在 <a></a> 上的坑
有人试过给 <a></a> 加 margin: 0 auto 想让它居中，结果完全没反应——因为 <a></a> 默认是内联元素，margin: auto 对它无效。
强行生效的写法是：display: block + width + margin: 0 auto，但这会强制换行，破坏行内语义。除非你明确要把它当按钮用（比如全宽导航链接），否则不推荐。
真正容易被忽略的是：一旦把 <a></a> 改成 block，它就不再和旁边文字同行了。如果原意是“同一行内居中对齐”，这个方案直接违背前提。
