HTML水平居中需按元素类型和上下文选择方案：text-align:center仅对行内内容有效；margin:0 auto要求块级、定宽、普通流；flex布局用justify-content:center最通用但改变父容器布局；absolute+transform适合脱离文档流。
HTML里“水平居中”不是单一操作，而是根据元素类型和上下文动态选择的决策过程。用错方案不会报错，但元素纹丝不动——问题往往出在你没意识到 text-align 不作用于块级子元素，或 margin: 0 auto 被父容器的 display: flex 静默覆盖。
text-align: center 只对行内内容起效
它不移动子元素，只控制父容器内部的文本、<span>、<img>（默认 inline）等行内级内容的对齐方式。
- 常见错误现象：
<div class="parent"><div class="child">内容</div></div>中给.parent加text-align: center，.child完全不移动 - 适用场景：段落文字居中、按钮内文字居中、
<img>在容器中水平居中（无需额外样式） - 失效条件：子元素是
display: block；父容器是display: flex或display: grid；子元素用了float或position: absolute
margin: 0 auto 要求块级 + 显式 width + 普通文档流
这是唯一真正“让块级元素自身居中”的传统方式，浏览器靠左右外边距均分剩余空间实现，但三个条件缺一不可。
- 必须设
width（如width: 300px或width: 80%），不能是100%或未声明 - 目标元素需为块级（
display: block，或默认块行为如<div>、<p>）；<img>若想走这条路，得先加display: block - 父容器不能是
display: flex或display: grid（会覆盖margin: auto行为）；子元素也不能有float或position: absolute
display: flex + justify-content: center 是现代首选
它不依赖子元素宽高，也不挑类型，但副作用明确：父容器变成 Flex 上下文后，所有直系子元素自动成为 Flex 项目。
立即学习“前端免费学习笔记（深入）”；
- 单行水平居中：父元素加
display: flex和justify-content: center - 完全居中（水平+垂直）：再加
align-items: center，且父容器需有明确高度（如height: 100vh） - 注意点：
float、vertical-align、传统margin对齐全部失效；若子元素本身width: 100%，它仍会撑满父容器，justify-content不起作用
position: absolute + transform: translate(-50%, -50%) 用于脱离文档流场景
当元素需要悬浮、遮罩、弹窗等不占位布局时，这是最可靠、尺寸无关的居中方式。
- 子元素必须设
position: absolute、top: 50%、left: 50% - 父容器必须有定位上下文（
position: relative、absolute或fixed），否则top: 50%会相对于视口计算，滚动即偏移 -
transform: translate(-50%, -50%)是关键——它把元素自身宽高的一半“挪回去”，不依赖已知尺寸，兼容性好（IE9+）
最容易被忽略的是：居中从来不是孤立操作，它总和元素当前的 display 值、父容器的布局模式、是否脱离文档流紧密耦合。打开开发者工具看一眼 Computed → display，比查文档更快定位问题根源。
