text-align不能直接作用于标签，因其为行内元素；必须作用于其块级父容器（如<div><p>）才能生效，或通过display:block/inline-block配合margin:auto或flex布局实现居中。
text-align 不能直接作用于 <a> 标签本身
<a> 默认是行内元素，而 text-align 只对**块级容器**生效，用于控制其内部的行内内容（比如文字、<img>、<a>）的水平位置。所以给 <a> 自己加 style="text-align: center;" 是无效的——浏览器会忽略它。
常见错误现象：<a style="text-align: center;" href="#">点击这里</a> 完全没反应，不是 CSS 写错了，是用错了对象。
正确思路：必须把 text-align: center 加在 <a> 的**父级块容器**上，比如 <p>、<div>、<nav> 等。
- ✅ 正确：
<p style="text-align: center;"><a href="#">点击这里</a></p> - ✅ 正确：
<div style="text-align: center;"><a href="#">按钮式链接</a></div> - ❌ 错误：
<a style="text-align: center;" href="#">…</a> - ❌ 错误：
<span style="text-align: center;"><a href="#">…</a></span>（<span>也是行内，不构成有效容器）
想让单个 <a> 在页面中“整体居中”，得先让它变成块级
如果目标不是“让链接文字在段落里居中”，而是“让这个链接像按钮一样，在整行/整个区域里水平居中显示”，那需要两步：
立即学习“前端免费学习笔记（深入）”；
第一步：把 <a> 变成块级或行内块，才能接受宽度和外边距控制；第二步：再用合适方式居中它自身。
- 用
display: block+margin: 0 auto：必须配width，否则margin: 0 auto不生效
示例：<a href="#" style="display: block; width: 200px; margin: 0 auto;">居中链接</a> - 用
display: inline-block+ 父容器text-align: center：更轻量，适合多个链接并排时统一居中
示例：<div style="text-align: center;"><a href="#" style="display: inline-block;">链接1</a> <a href="#" style="display: inline-block;">链接2</a></div> - 避免只写
display: inline-block却忘了父容器没设text-align: center——它只会左对齐，且可能因换行符产生空白间隙
Flex 布局下 text-align 对 <a> 失效的原因
当 <a> 的父容器用了 display: flex，它的子项（包括 <a>）就由 Flex 规则控制对齐，text-align 完全被忽略。
此时想居中链接，应该用 Flex 自身的属性：
- 仅水平居中：
justify-content: center - 水平+垂直居中（需父容器有高度）：
justify-content: center; align-items: center - 如果
<a>里面还有文字，text-align: center仍可用于控制其内部文字对齐（比如多行文本），但不影响<a>在 Flex 容器中的位置
常见错误现象：<div style="display: flex; text-align: center;"><a href="#">链接</a></div> —— text-align 这行白写了。
兼容性与实际调试建议
text-align: center 本身兼容性极好（IE6+ 都支持），真正出问题的往往是上下文布局干扰。
- 检查父容器是否塌陷：比如父
<div>里只有浮动子元素，没清除浮动，会导致高度为 0，text-align看起来“没效果” - 检查是否被其他 CSS 覆盖：用浏览器开发者工具看 computed styles，确认
text-align是否被flex、grid或float父容器压制 - 不要依赖
align="center"属性：<a align="center">是 HTML4 废弃语法，现代浏览器已不保证支持 - 移动端注意：
text-align: center在 viewport 缩放或 font-size-adjust 场景下依然可靠，比 JS 计算居中更稳
最易被忽略的一点：居中失败时，90% 不是 text-align 本身的问题，而是你没找准那个该加样式的“父块级容器”。
