最常用且可靠的水平居中方法是父容器设 display: flex 和 justify-content: center；margin: 0 auto 仅对有显式 width 的标准流块级元素生效，text-align: center 对块级元素自身无效。
margin: 0 auto 为什么没反应？
它只对「有明确 width」的块级元素生效，且必须在标准文档流里。不是所有 div 都能直接套用。
-
width必须显式设置（比如width: 300px或width: 80%），不能是auto或未声明 - 子
div不能有float、position: absolute或display: inline-block—— 这些会让它脱离文档流，margin: auto失效 - 父容器不能是
display: flex或display: grid，否则会走 flex/grid 的布局规则，margin: auto被忽略 - 常见错误现象：
div看起来“纹丝不动”，实际是它宽度为 100%，左右 margin 都算出来是 0
Flex 布局怎么写才真正水平居中？
关键在父容器，不是子元素。很多人把 justify-content: center 写错位置，导致无效。
- 必须在父容器上设
display: flex和justify-content: center，子div自己不用加任何居中相关样式 - 子
div不需要设width，也不用清margin；但如果同时写了margin: auto，会和 flex 规则冲突，建议删掉 - 如果父容器是
body，记得先重置默认边距：body { margin: 0; }，否则顶部/右侧会有白边 - 多个子
div会并排居中；如需纵向堆叠，加flex-direction: column
text-align: center 是不是也能让 div 居中？
不能。它只控制块级容器内部的行内内容（文字、img、span）对齐，对块级 div 自身完全无效。
- 如果你给父
div设了text-align: center，而子div是块级且没设width，它仍会撑满父容器——看起来“没动”，其实是文字居中了，不是 div 居中 - 如果你给子
div自己设text-align: center，那只是让里面文字居中，div的位置毫无变化 - 唯一能靠
text-align让“div 类元素”居中的场景：把子div改成display: inline-block，再在父容器上设text-align: center
绝对定位 + transform 还值得用吗？
仅限已知宽高的静态场景，响应式或动态内容下维护成本高，不推荐作为首选。
- 必须同时写三句：
position: absolute、left: 50%、transform: translateX(-50%)；漏任一都偏移 - 父容器必须设
position: relative，否则会相对于 viewport 定位，容易跑出视口 - 如果子
div宽度会变（比如响应式width: 90%），transform不会自动适配，得靠 JS 补救 - 性能上虽比纯 layout 高，但图层过多时移动端易卡顿，不如 flex 直接可靠
div 水平居中，最常踩的坑不是方法不会选，而是没意识到：居中效果依赖上下文 —— 它是否脱离流、父容器有没有高度、width 是否被覆盖、甚至 CSS 优先级是否被后来的规则干掉。调试时先查 computed styles，比反复改代码更省时间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
