margin: 0 auto仅对有明确宽度的块级元素水平居中有效；失效主因包括未设width、元素为行内级、父容器使用flex/grid、或元素浮动/绝对定位。
margin: 0 auto 为什么总不生效？
它只对「有明确宽度的块级元素」起作用，不是通用居中开关。常见错误是直接写 margin: 0 auto 却没设 width，或者用在 span 这类默认 display: inline 的元素上。
- 必须显式声明
width（如width: 400px或width: 80%），不能是width: 100%或未设置 - 父容器不能是
display: flex或display: grid—— 这两种布局会完全接管子项对齐逻辑，margin: auto被忽略 - 它只控制水平方向，垂直方向毫无影响；若父容器高度塌陷，还可能看起来“没居中”
- 兼容性极好（IE6+），但响应式场景下需配合
max-width和媒体查询才稳妥
Flex 居中必须同时写 justify-content 和 align-items 吗？
只写 justify-content: center 只能水平居中；要真正“上下左右都居中”，align-items: center 缺一不可——而且这两条都得写在父容器上，不是目标元素本身。
- 父容器必须设
display: flex，且要有可计算的高度（比如min-height: 100vh或内部内容撑开） - 子元素无需设宽高，也无需是块级；
img、button、甚至带文字的span都能直接居中 - 副作用明显：开启 flex 后，子元素的
float、vertical-align和部分margin行为会失效 - 旧版 Safari（-webkit- 前缀：
display: -webkit-flex、-webkit-justify-content: center
什么时候该用 position + transform 居中？
当元素需要脱离文档流（比如弹窗、遮罩层、tooltip），又必须精准居中时，position: absolute 配合 transform: translate(-50%, -50%) 是目前最可控的选择。
- 父容器必须设
position: relative（或absolute/fixed），否则top: 50%会相对于视口计算，滚动就偏移 - 只写
left: 50%; top: 50%是错的——那只是把左上角锚到中心点，必须补上transform: translate(-50%, -50%)才真正居中自身 - 不依赖子元素尺寸，也不吃 flex 兼容性问题，IE9+ 原生支持
- 注意可访问性：脱离文档流后，键盘焦点和屏幕阅读器顺序可能被打乱，需手动处理
tabindex和aria-modal
text-align: center 是给谁用的？
text-align: center 只作用于父容器内的行内内容（文本、span、a、img 默认也是行内），不是用来居中父容器自身的。
- 必须写在父容器上，例如：
.wrapper { text-align: center; }，子元素才能水平居中 - 对块级子元素（如
div）无效；想让它居中，要么改子元素为display: inline-block，要么换margin: 0 auto或flex - 单行文本垂直居中靠
line-height等于容器高度；多行文本必须用flex或grid - 如果父容器用了
display: flex或display: grid，text-align对子元素的水平对齐可能被忽略
margin: auto 和 text-align 的效果；而绝对定位又极度依赖父容器是否设置了非 static 的 position。选方案前，先看清你正在哪个布局上下文中操作。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
