text-align: center 必须作用于父块级容器（如 或 ）才能使内联的 标签内容居中，直接设在 上无效；多行链接整体居中需用 display: flex + justify-content: center。
用 <p></p> 或 <div> 包裹后设 <code>text-align: center
直接给多个 <a></a> 标签加 text-align: center 没用，因为 <a></a> 默认是内联元素，text-align 必须作用在它的**父块级容器**上才生效。
最稳妥的做法是用 <p></p> 或 <div> 把所有链接包起来，再通过 CSS 设置居中：<pre class="brush:php;toolbar:false;"><div style="text-align: center;">
<a href="#home">首页</a>
<a href="#about">关于</a>
<a href="#contact">联系</a>
</div></pre>
<ul>
<li>不用依赖已废弃的 <code><center></center> 标签（HTML5 不推荐）
<p align="center"></p> 这类过时的属性写法（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></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> 语义化包裹更合理
多个导航链接本质上就是导航区域，用 <nav></nav> 替代无意义的 <div> 不仅语义清晰，也方便后续加样式或无障碍支持。<pre class="brush:php;toolbar:false;"><nav style="text-align: center;"><a href="#home">首页</a>
<a href="#about">关于</a>
</nav></pre>
<ul>
<li>不要为了“省事”用 <code><center></center> 或 <p align="center"></p> —— 它们已被 HTML5 明确标记为“obsolete”
text-align，得配合 line-height 或 Flex 的 align-items
white-space: nowrap 或媒体查询做响应式断点实际开发中最容易被忽略的是：换行带来的空白间隙 和 语义容器缺失导致的可访问性问题。前者影响视觉精度，后者会影响屏幕阅读器识别导航意图。
