HTML水平居中需先判断元素类型和上下文：text-align:center仅对行内内容有效；margin:0 auto要求块级、定宽、普通流；flex需父容器设display:flex+justify-content:center；absolute+transform适用于脱离文档流元素。
零基础学HTML水平居中，别从“六种方法”开始背——先看元素类型和它在页面里“站没站稳”。绝大多数失败，不是代码写错，而是没判断清楚：它是行内元素还是块级元素？有没有脱离文档流？父容器是不是flex或grid？
text-align: center 只对行内内容起作用
这是新手最容易卡住的地方：给一个 <div> 加了 text-align: center，结果纹丝不动。
- 它只影响父容器内部的行内级内容：文本、
<span>、<img>（默认是inline-block）、<a> - 对子
<div>、<p>这类块级元素完全无效——因为它们不参与“行内对齐” - 如果父容器用了
display: flex或display: grid，这个声明会被直接忽略 - 常见补救：把块级子元素改成
display: inline-block，再靠父容器的text-align: center居中
margin: 0 auto 要求块级 + 定宽 + 在普通流中
想让一个 <div> 自己居中？这是唯一真正“移动元素自身”的传统方式，但三个条件缺一不可。
- 元素必须是块级（
display: block，或table等可设宽的格式上下文） - 必须有明确宽度：
width（如300px）、max-width，不能是100%或auto - 不能脱离文档流：删掉
float、position: absolute、position: fixed -
<img>默认是inline，直接加margin: 0 auto无效；得先加display: block
justify-content: center 在 flex 容器中才生效
很多人以为只要写上这句就万事大吉，结果发现子元素没动——八成是忘了给父容器加 display: flex。
立即学习“前端免费学习笔记（深入）”；
- 必须成对使用：
display: flex+justify-content: center - 父容器一旦变成 flex，所有直系子元素自动成为 flex item，
float、vertical-align、甚至部分margin行为都会失效 - IE10–11 对
justify-content有渲染 bug（比如居中偏移），老项目慎用 - 如果父容器高度未定义，又想垂直居中，还得补上
align-items: center
position: absolute + transform: translateX(-50%) 专治已定位元素
当元素已经写了 position: absolute 或 position: fixed，再硬套 margin: 0 auto 就完全失效了——这时候只能用定位+平移。
- 父容器必须有
position: relative（或absolute/fixed），否则left: 50%会相对于视口计算 - 只写
left: 50%是把元素左边缘移到中心；必须加transform: translateX(-50%)把它向左拉回自身宽度一半 - 不用提前知道宽度，比
margin-left: -100px更安全、响应式友好 - IE9+ 支持，但旧版 Safari 需要
-webkit-transform前缀
真正容易被忽略的，是“元素类型”和“父容器布局模式”的组合关系。同一个 text-align: center，在普通 <div> 里有效，在 display: flex 里就彻底失能——不是代码错了，是上下文变了。
