超链接居中应避免使用已废弃的align属性，推荐用父容器text-align: center实现行内居中、display: block+margin: 0 auto实现块级居中，或flex布局实现精准水平垂直居中。
超链接居中不是给 <a> 标签加 align="center" —— 这个属性在 HTML5 中已废弃，浏览器可能忽略，或只在部分旧标签（如 <p>、<h1>）上“碰巧生效”，但不可靠。
用 text-align: center 居中行内超链接
这是最常用、兼容性最好的方式，适用于单个或多个 <a> 元素水平居中。
- 必须作用于
<a>的父容器（如<div>、<p>、<nav>），不能直接写在<a>上 -
<a>默认是inline元素，所以父元素设text-align: center就能对齐它 - 如果父容器宽度不够（比如被内容撑开又没设宽），视觉上可能“看不出居中”，建议检查父容器是否占满行宽
<div style="text-align: center;"> <a href="#">首页</a> <a href="#">关于</a> <a href="#">联系</a> </div>
用 margin: auto 居中块级超链接
当你要让一个超链接自身作为独立块居中（比如按钮式链接），需先把它变成块级元素。
- 给
<a>加display: block或display: inline-block - 再设置
width（必须有明确宽度，否则margin: auto无效） -
margin: 0 auto即可水平居中；若要上下也居中，得配合父容器height和flex或position
<a href="#" style="display: block; width: 120px; margin: 0 auto; text-align: center;">立即下载</a>
用 Flex 实现精准的水平+垂直居中
适合模态框、登录入口、Banner 中心按钮等需要严格居中的场景。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex，同时加justify-content: center（水平）和align-items: center（垂直） - 父容器必须有明确高度（如
height: 100vh）或被内容撑开，否则垂直居中无参照 -
<a>本身无需改display，保持inline也能被 flex 正确对齐
<div style="display: flex; justify-content: center; align-items: center; height: 200px; border: 1px solid #ccc;"> <a href="#">点击进入</a> </div>
别踩 align 属性的坑
HTML4 时代常用 <a align="center">，但现在：
-
align不是<a>的合法属性，W3C 已移除，现代浏览器（Chrome/Firefox/Safari）完全不支持 - 某些编辑器或老旧 CMS 可能还允许写，但实际渲染无效，且会触发 HTML 验证警告
- 即使在
<p align="center"><a>...</a></p>中“看起来有效”，本质仍是靠<p>的对齐行为，不是<a>自身的属性起作用
真正复杂的地方在于：居中目标不同（单个链接？一排导航？响应式布局？），对应解法就不同。很多人卡在“为什么加了 text-align: center 没反应”，其实是父容器没占满宽度，或者用了 float / position: absolute 破坏了文档流——这些细节比写哪行代码更重要。
