margin: 0 auto 实现水平居中必须设置 width，仅适用于有明确宽度的块级元素；text-align: center 仅使内容居中而非容器自身；Flex 布局（justify-content + align-items）是现代项目水平垂直居中的首选方案。
用 margin: 0 auto 实现水平居中，但必须设 width
这是最直接、兼容性最好的方式，IE6+ 都能正常工作。关键在于：它只对「有明确宽度的块级元素」生效。
常见错误现象是写了 margin: 0 auto 却完全没动——大概率是因为漏了 width。浏览器需要知道元素多宽，才能算出左右空多少。
- 必须显式设置
width，比如width: 600px或width: 80% - 元素默认是
display: block，不用额外写 - 父容器不能是
display: inline-block或浮动状态，否则可能塌陷导致失效 - 不适用于
position: absolute元素（此时要用left: 50%+transform: translateX(-50%)）
为什么 text-align: center 不会让 div 自身居中
text-align: center 只控制「内联内容在块级父容器内的对齐方式」，不是让父容器自己居中。给一个 div 加这个声明，只会让它里面的文字、图片等水平居中，而该 div 本身仍左贴边。
如果你看到某个 div 因为加了 text-align: center 而“好像居中了”，大概率是它被包在另一个设置了 text-align: center 的父容器里，且该父容器本身用了 margin: 0 auto 或 Flex 布局。
立即学习“前端免费学习笔记（深入）”；
- 别用
<center>标签：HTML5 已废弃，语义错误且不可靠 - 想让文字在其容器内居中，才用
text-align: center - 想让容器自身居中，得操作容器自己的布局属性
Flex 布局实现水平+垂直居中（现代项目首选）
如果需要同时水平和垂直居中（比如模态框、登录框），margin: 0 auto 就不够用了，这时用 Flex 是最简洁可靠的方案。
核心是把父容器设为 display: flex，再用两个对齐属性：
-
justify-content: center控制主轴（默认是水平）居中 -
align-items: center控制交叉轴（默认是垂直）居中 - 父容器建议加
min-height: 100vh，确保全屏高度下也能垂直居中 - 子容器仍需有明确
width（若依赖水平居中逻辑），但高度可自适应
绝对定位 + margin: auto 的边界条件
这种方式能在已知宽高的子元素上实现水平垂直居中，但对父容器有硬性要求：必须有定位上下文（即 position: relative、absolute 或 fixed）。
代码看起来简单，但容易忽略前提：
- 子元素要设
position: absolute - 四个方向都设为
0：top: 0; right: 0; bottom: 0; left: 0; - 再加
margin: auto，浏览器才会计算居中偏移 - 父容器如果没有定位，这个
absolute会相对于 viewport 定位，结果不可控
真正复杂的地方往往不在写法本身，而在你是否清楚当前元素所处的定位上下文和文档流状态。很多“居中失败”问题，其实卡在父容器塌陷或定位缺失上，而不是居中语句写错了。
