超链接文字居中需作用于父容器：行内链接用父容器text-align: center；块级链接（display: block）需自身设margin: 0 auto或用flex布局；text-align加在上无效，因其是容器属性，只控制子内容对齐。
超链接文字居中但父容器有固定宽度
直接给 @#@#@#@#@#@#@#@#@#@0 单独加 text-align: center 样式完全没反应；或者加了却只看到文字左对齐，因为样式写在了 <a></a> 自身上。
- 把
<a></a>包进一个块级容器（如<div class="link-container">） <li>给该容器设固定宽度（如 <code>width: 300px）和text-align: center -
<a></a>本身无需额外样式，保持默认display: inline即可 - 给
<a></a>加display: block或display: inline-block - 设置明确宽度（如
width: 120px）和margin: 0 auto - 若用
inline-block，父容器仍需配text-align: center才能生效 - 注意：
margin: 0 auto在display: block下才可靠；inline-block容易因换行符产生间隙，建议父容器设font-size: 0再重置子元素字体 - 单行链接：用
line-height匹配容器高度，再配合text-align: center - 多行或响应式链接：放弃
line-height，改用 Flex 布局更稳妥 - 示例：
.link-container { display: flex; justify-content: center; align-items: center; height: 48px; }—— 这样无论一行两行，文字都真正居中 - 注意
align-items: center要求容器有明确高度，否则无效
超链接本身当块级元素居中（带背景/边框时常用）
如果 <a></a> 要撑满固定宽度、有背景色或 hover 效果，就得让它变成块级元素。这时居中逻辑就变了：不是靠父容器的 text-align，而是让 <a></a> 自己水平居中。
适用场景：导航菜单项、按钮式链接、卡片底部操作链接。
响应式下固定宽度导致文字换行错位
设了 width: 300px 后，在小屏上文字可能被强制截断或换行到第二行，但第二行依然按单行逻辑居中，视觉上像“上下偏移”。这不是居中失效，而是容器高度没同步适配。
容易踩的坑：以为加个 line-height 就能垂直居中，结果多行时完全失灵。
为什么不用 text-align 直接作用于 a 标签
因为 text-align 是**容器属性**，不是文本自身属性。它控制的是“子内容”的水平对齐方式，而不是“自己”的位置。给 <a></a> 加 text-align: center，等于告诉它：“把你内部的文字居中”——但它内部只有文字，且文字本来就是从左往右自然排列，所以毫无变化。
真正起作用的是父容器的 text-align（对行内子元素）或 margin: 0 auto（对块级子元素）。
复杂点在于：一旦你给 <a></a> 加了 display: block，它就不再是“被居中的对象”，而变成了“需要被居中的元素”，此时必须切换策略——别再依赖父容器的 text-align，得用块级居中法或 Flex。这点很容易被忽略，尤其在快速改样式时。
