text-align: center 必须作用于父块级容器（如 <div> 或 <p>）才能使内联的 <a> 标签内容居中，直接设在 <a> 上无效；多行链接整体居中需用 display: flex + justify-content: center。
用 <p> 或 <div> 包裹后设 text-align: center
直接给多个 <a> 标签加 text-align: center 没用，因为 <a> 默认是内联元素，text-align 必须作用在它的**父块级容器**上才生效。
最稳妥的做法是用 <p> 或 <div> 把所有链接包起来，再通过 CSS 设置居中：
<div style="text-align: center;"> <a href="#home">首页</a> <a href="#about">关于</a> <a href="#contact">联系</a> </div>
- 不用依赖已废弃的
<center>标签（HTML5 不推荐） - 避免用
<p align="center">这类过时的属性写法（W3C 已弃用） - 如果链接换行了（比如宽度不够自动折行），
text-align: center依然会让每行都居中，不是整体居中
链接之间加空格或换行会导致多余间隙
HTML 会把标签间的空白符（空格、换行、制表符）合并成一个空格显示。所以这样写：
<div style="text-align: center;"> <a href="#">首页</a> <a href="#">关于</a> <a href="#">联系</a> </div>
会在每个链接间渲染出一个空格 —— 看起来像“首页 关于 联系”，而不是紧挨着的。
立即学习“前端免费学习笔记（深入）”；
- 解决方法：删掉标签间的换行和空格，写成一行：
<a>首页</a><a>关于</a><a>联系</a> - 或者用
font-size: 0压掉父容器的字体大小，再给<a>单独设回字体（适合需要精确控制间距的场景） - 更现代的替代方案是用
display: flex，但要注意老浏览器兼容性
想让多行链接“整体居中”而非“每行居中”？得用 Flex 布局
当链接数量多、自动换行后，你可能发现它们被分成了两行或三行，而你希望这两行作为一个整体水平居中（比如左右留白相等），而不是每行各自居中对齐 —— 这时 text-align 就不够用了。
正确做法是用 Flex 容器，并设 justify-content: center：
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;"> <a href="#">首页</a> <a href="#">关于</a> <a href="#">服务</a> <a href="#">产品</a> <a href="#">联系</a> </div>
-
flex-wrap: wrap允许换行；justify-content: center让整组项目水平居中 -
gap控制链接间距，比用margin更干净（无需处理首尾） - IE10+ 支持
flex，如需兼容 IE9 及更早版本，只能退回到text-align + inline-block组合方案
用 <nav> 语义化包裹更合理
多个导航链接本质上就是导航区域，用 <nav> 替代无意义的 <div> 不仅语义清晰，也方便后续加样式或无障碍支持。
<nav style="text-align: center;"> <a href="#home">首页</a> <a href="#about">关于</a> </nav>
- 不要为了“省事”用
<center>或<p align="center">—— 它们已被 HTML5 明确标记为“obsolete” - 如果链接需要垂直居中（比如放在页眉里），别只靠
text-align，得配合line-height或 Flex 的align-items - 移动端要注意小屏下链接是否挤在一起，建议加
white-space: nowrap或媒体查询做响应式断点
实际开发中最容易被忽略的是：换行带来的空白间隙 和 语义容器缺失导致的可访问性问题。前者影响视觉精度，后者会影响屏幕阅读器识别导航意图。
