居中本身不破坏无障碍，但用错方式会让屏幕阅读器丢失结构、键盘焦点错乱或视障用户感知不到视觉意图；Flexbox居中时align-items和justify-content不能替代语义，text-align:center仅对行内内容有效，绝对定位居中必须补aria-hidden或明确role。
居中本身不破坏无障碍，但用错方式会让屏幕阅读器丢失结构、键盘焦点错乱、或视障用户完全感知不到“居中”这个视觉意图。
用 Flexbox 居中时，align-items 和 justify-content 不能替代语义
很多人把整个页面内容塞进一个 display: flex 容器里，靠 justify-content: center 和 align-items: center 把所有东西“摆中间”。这在视觉上没问题，但对辅助技术来说，它抹平了原本的文档流和语义层级。
- 屏幕阅读器仍会按 HTML 顺序线性读取，不会因为视觉居中就跳过导航或跳到主内容
-
align-items: center可能让<main></main>在 Flex 容器里垂直居中，结果<main></main>实际位置偏移，AT 的“跳转到主内容”快捷键（如 J 键）失效 - 如果居中容器设了
tabindex="-1"却没加role="region"或aria-label，键盘用户 Tab 进去后不知道这是什么区域
正确做法：居中只作用于布局容器本身，不干扰语义结构。比如用 Flex 居中一个 .hero 区块，但它的父级仍是标准的 <main></main>，且 <main></main> 保持唯一、未嵌套、未被 Flex 拉伸变形。
text-align: center 对文本居中影响很小，但别用它居中按钮或表单控件
text-align: center 仅影响行内内容（文字、图片、<span></span>），对块级元素无效。但它常被误用于“让按钮居中”，结果是按钮自己没动，只是里面文字居中了。
立即学习“前端免费学习笔记（深入）”；
- 按钮居中应靠父容器的
display: flex+justify-content: center，或margin: 0 auto（需设宽度） - 若用
text-align: center在<form></form>上，会导致所有子元素（包括<label></label>、<input>）都左对齐文字，破坏表单可读性 - 对屏幕阅读器无直接影响，但视觉混乱会间接影响认知障碍用户理解操作顺序
绝对定位居中（position: absolute）必须补 aria-hidden 或明确角色
用 top: 50%; left: 50%; transform: translate(-50%, -50%) 居中弹窗、提示框很常见，但这类元素脱离文档流后，默认会被屏幕阅读器当作“静态装饰”忽略。
- 如果它是功能性的（如确认对话框），必须加
role="dialog"、aria-modal="true"，并用aria-labelledby关联标题 - 如果只是装饰性图示（如背景装饰点），加上
aria-hidden="true"，避免 AT 误读 - 绝对定位元素若没设
width和max-width，在窄屏下可能溢出，导致键盘焦点卡在不可见区域
真正关键的不是“怎么居中”，而是“居中之后，结构是否还清晰、焦点是否可预测、语义是否未被覆盖”。视觉居中是表层效果，无障碍居中是逻辑归位——把该听的内容放在该听的位置，该聚焦的控件保留在该聚焦的顺序里。
