给父容器设 text-align: center 即可使超链接（行内元素）和副标题（块级元素）内的文字均水平居中；若需二者并排显示，须将副标题设为 display: inline-block；若要整体水平垂直居中，则父容器应使用 display: flex、justify-content: center 和 align-items: center。
超链接和副标题在同一个容器里怎么水平居中
直接给包含 <a></a> 和 <h2></h2>（或 <h3></h3> 等）的父容器加 text-align: center 就行。因为 <a></a> 默认是行内元素，<h2></h2> 是块级元素，但只要它们都在一个块容器里，text-align: center 会让所有**行内级内容**（包括 <a></a>、文本、<span></span>）水平居中；而 <h2></h2> 这类块级元素会自动占满父宽，文字自然也居中。
常见错误现象：<h2 align="center"></h2> 或 <a align="center"></a> —— 这些 HTML 属性早已废弃，在现代浏览器中不生效，也不该用。
- 推荐写法：给父
<div> 加 <code>style="text-align: center;"，或外链 CSS 中写div.header { text-align: center; } - 如果副标题和链接是并排显示（比如一行里先
<h3></h3>后<a></a>），且你希望它们左右对齐而非上下堆叠，那就得让<h3></h3>变成display: inline-block，否则它会独占一行 - 别给
<a></a>单独设margin: 0 auto—— 它是行内元素，这个声明无效 - 给父容器设
display: flex、justify-content: center（水平）、align-items: center（垂直） - 确保子元素（
<h3></h3>和<a></a>）没额外float、position: absolute或display: block强制换行干扰布局流 - 如果
<a></a>里套了<button></button>或图片，注意默认vertical-align: baseline可能造成视觉偏移，可统一设vertical-align: middle - 若真要用
margin居中，得先改显示模式：<a style="display: block; width: fit-content; margin: 0 auto;"></a> - 但这样会让链接独占一行，失去和副标题并列的可能，不如用 Flex 或
text-align - 同理，
<h3></h3>设margin: 0 auto能让它自身水平居中，但前提是它有明确宽度（比如width: 80%），否则等效于width: auto，automargin 不起作用 - 检查是否用了
white-space: nowrap强制不换行，这在窄屏下会导致横向溢出 - 更稳妥的做法是用 Flex 并配合
flex-wrap: wrap，再用text-align: center处理换行后的每行内容 - 避免对
<a></a>设固定width或min-width，它应随文字长度自适应；副标题同理，别用<h3 style="width: 200px"></h3>锁死
想让超链接和副标题整体垂直+水平居中（比如页眉卡片）
这时要居中的不是“文字”，而是整个组合区块。必须用 Flex 布局，控制父容器，而不是单个元素。
关键点：父容器需有明确的尺寸（至少高度），否则 align-items: center 没参照系。
立即学习“前端免费学习笔记（深入）”；
为什么 margin: 0 auto 对超链接无效
<a></a> 默认是行内元素，margin: 0 auto 只对**块级元素或 display 为 block/inline-block/table 的元素**生效。强行给 <a style="margin: 0 auto"></a> 加，浏览器会忽略左右 margin。
响应式下文字和链接居中错位怎么办
多出现在小屏上换行后：原本一行的 <h3></h3> + <a></a> 被挤成两行，但父容器仍按单行逻辑居中，导致视觉偏移。
text-align，后者必须动布局。很多人调了半天 line-height 或 padding，其实问题压根不在文字本身。
