text-align: center 必须加在块级父容器上而非标签本身，因为该属性仅对块级元素内的行内内容生效；默认为行内元素，自身无法通过text-align居中。
text-align: center 不是加在 <a> 标签上，而是加在它的**父容器**上——这是绝大多数人一开始写错的地方。
为什么直接给 <a> 设 text-align 没反应
因为 text-align 是块级容器的属性，只对内部的行内内容（比如文字、<img>）起作用。<a> 默认是行内元素，它自己不能“居中自己”。你给它设 text-align: center，浏览器直接忽略。
- 错误写法：
<a style="text-align: center">点我</a> - 正确思路：让
<a>所在的<div>、<p>或<nav>这类块级父元素负责居中 - 如果父容器没设宽高或被
float/position: absolute破坏文档流，text-align也可能失效
超链接文字水平居中就用 text-align: center + 块级父容器
这是最轻量、兼容性最好（IE6+ 都支持）、也最符合语义的做法。适用于导航栏、按钮组、页脚链接等场景。
- HTML 示例：
<div class="link-group"><a href="#">首页</a> <a href="#">关于</a></div> - CSS 示例：
.link-group { text-align: center; } - 注意：多个
<a>会并排居中，中间空格会被渲染为一个空格；如需紧凑排列，可加.link-group a { display: inline-block; margin: 0 8px; }
要让单个超链接自身在页面里居中（比如独立按钮），得走块级化路线
当你要的不是“文字居中”，而是“这个链接像按钮一样整个在页面中央”，就得把它变成块级元素再配合 margin: 0 auto。
立即学习“前端免费学习笔记（深入）”；
- 关键三步：
display: block（或inline-block）+width（必须有值，不能是auto或100%）+margin: 0 auto - 示例：
<a href="#" style="display: block; width: 120px; margin: 0 auto;">立即下载</a> - 常见坑：父容器是
flex或grid时，margin: auto会被覆盖，此时应改用justify-content: center控制父容器
现代项目推荐用 Flex 实现更可控的居中
尤其当你需要同时控制水平和垂直居中（比如模态框里的操作链接），或者父容器高度动态（如全屏 banner），Flex 是目前最稳的选择。
- 只需两行 CSS：
display: flex在父容器上，再加justify-content: center（水平）和align-items: center（垂直） - 注意：
align-items: center要求父容器有明确高度（如min-height: 100vh），否则垂直方向无效果 - 副作用：
<a>子元素的vertical-align和传统margin对齐逻辑全部失效，别混用
真正容易被忽略的是上下文——text-align 看似简单，但它的生效完全依赖父容器是否“够格”：是不是块级、有没有脱离文档流、里面有没有其他浮动或定位元素干扰。调试时先用开发者工具检查 computed styles，确认 text-align 是否真的应用到了正确的父节点上。
