text-align: center 仅对行内内容生效，需配合行内/行内块级子元素使用；margin: 0 auto 要求显式设置 width 且元素为块级；Flex 居中需 display: flex、justify-content 和 align-items 配合；绝对定位+transform 最通用但脱离文档流。
text-align: center 只对行内内容生效
它不是让 div 自己居中，而是让它的子元素（文字、img、span）在内部水平居中。常见错误是给一个空 div 加了 text-align: center，结果什么都没变——因为里面没行内内容可居中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用于文本、按钮、图标等行内/行内块级子元素的水平居中
- 配合
display: inline-block可间接“居中”块级子元素，但父容器需处理换行符间隙（如设font-size: 0或注释掉换行） - 在 Flex 或 Grid 容器里无效，这些布局下应直接用
justify-content
margin: 0 auto 要求明确 width
这是让块级元素自身水平居中的经典写法，但失效率极高——90% 的问题是漏了 width。浏览器看到 margin: 0 auto 却不知道“左右均分多少空间”，只能放弃计算。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置
width（如width: 600px或width: 80%），max-width单独用不行 - 元素不能是
display: inline、flex、grid或absolute，否则automargin 失效 - 父容器不能塌陷（比如子元素全浮动时，父容器高度为 0，
margin: 0 auto就没参照系）
Flex 布局居中要配齐 display + justify-content + align-items
display: flex 是开关，justify-content: center 控制水平，align-items: center 控制垂直。三者缺一不可；只写前两个，垂直方向不会动——除非父容器有明确高度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
height（或min-height）才能让align-items: center有作用域 - 别直接在
body上套display: flex，容易撑高整个页面、破坏文档流，推荐包一层div作容器 - 子元素会变成 Flex 项目，
float、vertical-align等属性失效，注意已有样式兼容性
绝对定位 + transform(-50%, -50%) 最通用但脱离文档流
这是目前唯一能不依赖父容器尺寸、不改变子元素显示模式、且同时搞定水平+垂直居中的方案。但它会让元素脱离文档流，后续元素会“无视”它占位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 父容器需设
position: relative（否则top/left相对的是 viewport） - 子元素写
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 慎用于响应式正文区域——它不随窗口缩放自动重排，更适合模态框、加载提示这类固定尺寸浮层
真正难的不是写出某一种居中代码，而是判断当前元素类型、父容器布局模式、是否需要响应式、是否允许脱离流——这些条件一旦错配，再“标准”的代码也白搭。
