没有“完美居中”，只有适配当前场景的最稳方案：text-align仅对行内内容有效；margin:0 auto需明确宽度且不适用于脱离流元素；Flex需父设display:flex及高度才能垂直居中；transform需定位上下文且影响可访问性。
直接说结论：没有“完美居中”这回事，只有“当前场景下最稳、最易维护的居中”。选错方法，轻则响应式失效，重则布局崩塌、可访问性受损。
text-align: center 只对行内内容有效
很多人给 div 直接加 text-align: center，发现子 div 根本不动——因为它是块级元素，text-align 对它没用。
- 适用对象：文本、
span、img（默认行内块）、button等行内或行内块级元素 - 必须作用于父容器，不是目标元素本身
- 只控制水平对齐，垂直方向完全不生效
- 如果父容器没设高度，又想靠
line-height垂直居中单行文本，得确保line-height和容器高度一致，且不能换行
margin: 0 auto 要求块级元素有明确宽度
margin: 0 auto 是最常被误用的居中手段。它根本不是“让元素居中”，而是“让左右外边距均分剩余空间”——前提是元素宽度小于父容器。
- 必须设置
width或max-width，否则默认 100%，左右 margin 都是 0 - 只对文档流内的块级元素生效；
float或position: absolute元素会失效 - 无法垂直居中；若强行给
margin-top/margin-bottom设 auto，浏览器会忽略 - 在 Flex/Grid 容器里，
margin: auto行为会改变（比如在 Flex 中可实现轴向居中），但这是另一套逻辑，别混用
Flexbox 居中需同时控制父容器 display 和尺寸
写 justify-content: center 却没居中？大概率是父容器没设 display: flex，或者没给高度导致 align-items: center 失效。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须声明
display: flex，子元素才会进入 Flex 上下文 - 水平居中只需
justify-content: center；垂直居中依赖align-items: center，但后者需要父容器有明确高度（如height、min-height或撑满视口） - 若父容器高度由内容撑开，
align-items: center看起来“没效果”，其实是它真没空间可居中 - 避免在已用 Flex 的父容器里再对子元素设
margin: auto，行为可能意外（比如在主轴方向会覆盖justify-content）
transform: translate(-50%, -50%) 脱离文档流后要小心定位上下文
这个组合看似万能，但一不小心就“飘出屏幕”或遮挡其他内容。
- 子元素必须是
position: absolute或fixed，且父容器要有position: relative（否则相对 viewport 定位） -
top: 50%和left: 50%是把元素左上角移到父容器中心，transform才把它拉回来——所以它脱离文档流，不影响其他元素布局 - 如果父容器本身没高度，或高度随内容变化，
top: 50%的基准会漂移，导致居中偏移 - 屏幕缩放、字体放大等辅助功能可能破坏该方案的视觉准确性，对无障碍支持不友好
真正难的不是写出某一种居中代码，而是判断当前元素是否该脱离文档流、父容器是否可控、是否要响应式适配、是否要考虑屏幕阅读器——这些决策点，比语法本身更影响最终效果。
