居中不影响:focus触发，但移除outline后必须补充焦点样式；:focus-visible需写在:focus之后；伪链接需加tabindex="0"并监听键盘事件；移动端需分层控制:focus与系统高亮。
超链接居中后:focus样式失效或不可见
居中本身不影响焦点逻辑，但常见错误是居中后顺手加了 outline: none 却没补替代样式，导致键盘用户按 Tab 到 <a></a> 时完全看不到聚焦位置。浏览器默认的蓝色轮廓被移除后，视觉通道就断了。
必须做两件事：
① 保留 :focus 样式（哪怕只是微弱提示）；
② 如果用了 :focus-visible，确保它和 :focus 共存且顺序正确。
-
a:focus建议用outline: 1px dotted #666或box-shadow: 0 0 0 2px rgba(0,119,255,0.3)，轻量但可识别 -
a:focus-visible必须写在a:focus之后，否则会被覆盖；它应更明显，比如outline: 2px solid #007bff; outline-offset: 2px - 绝对不要写
*:focus { outline: none }—— 这会干掉所有:focus-visible的生效基础
居中方式影响:focus触发行为吗
不影响。无论你用 text-align: center、margin: 0 auto 还是 display: flex 居中，<a href="..."></a> 的可聚焦性只取决于它是否为原生可聚焦元素（它本来就是），以及是否被隐藏（display: none 或 visibility: hidden）。
真正容易出问题的是「伪链接」：比如用 <div role="link"> 模拟超链接。这种情况下：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>必须加 <code>tabindex="0" 才能进 Tab 流
keydown，对 Enter（keydown）和 Space（keyup）都响应:focus-visible 样式，且不能依赖全局重置移动端点击后:focus与系统高亮冲突
iOS 和部分安卓 WebView 中，点击 <a></a> 会同时触发 :active、短暂 :focus 和系统级灰色点击 overlay，导致焦点样式被遮盖或闪烁。
解决思路不是禁用 :focus，而是分层控制：
- 用
:active控制点击瞬态反馈（如背景变暗），别让它和:focus样式打架 - 对
:focus使用box-shadow而非outline，避免被系统 overlay 吃掉边框 - 必要时加
-webkit-tap-highlight-color: transparent关闭系统高亮，但仅限 iOS；安卓需额外测试 - 注意：去掉系统高亮后，必须强化
:focus视觉反馈，否则键盘用户更难判断状态
居中链接在键盘导航中“跳过”或焦点错位
这不是居中导致的，而是 HTML 结构或 tabindex 干扰了自然 Tab 顺序。原生 <a href="..."></a> 默认就在 Tab 流里，加 tabindex="0" 反而可能引发 SSR/hydration 时焦点提前落到该链接上，导致后续 JS 焦点接管失败。
检查这几处：
- 确认没有给
<a></a>加tabindex="-1"—— 这会让它彻底退出 Tab 流 - 确认父容器没设
tabindex="-1"且没监听focusin做拦截，否则焦点可能被“吸走” - 如果链接在 flex 或 grid 容器中，确保没意外设置
order或visibility: hidden影响渲染顺序 - 用浏览器 DevTools 的 Accessibility 面板查看该链接是否出现在“Accessibility Tree”中，且
focusable为 true
最常被忽略的一点：居中本身不改变可访问性，但开发者常因追求视觉“干净”而删掉所有焦点反馈，结果把键盘用户的导航路径直接抹平了——这比居中方式选错严重得多。
