margin: 0 auto 实现块级元素水平居中需满足：有明确 width 或 max-width、为块级元素、未脱离文档流（无 float/absolute）；text-align: center 仅对行内内容有效；Flex 布局用 display: flex + justify-content: center 更灵活。
用 margin: 0 auto 实现块级元素水平居中
这是最常用也最可靠的方式，但有个前提：元素必须有明确的 width，且不能是 display: inline 或 inline-block（除非你故意用它）。浏览器靠左右外边距“均分剩余空间”来实现居中，所以 auto 必须成对出现。
常见错误现象：margin: auto 单写、或只写 margin-left: auto; margin-right: auto 但没设 width，结果毫无反应；或者给 <div> 加了 <code>float，导致 margin: 0 auto 失效。
- 必须设置固定宽度，比如
width: 960px或max-width: 1200px - 元素需为块级（
display: block是默认值，一般不用显式写） - 避免同时使用
float或position: absolute，它们会破坏文档流，让auto失效 - 现代写法可配合
box-sizing: border-box，防止内边距/边框撑宽容器
为什么不能只靠 text-align: center
text-align: center 只影响**行内内容**（文字、图片、span 等）的对齐，对块级容器本身不起作用。新手常误以为给 body 或父 div 加这个就能居中整个页面布局，结果只是文字居中了，容器还是贴左。
典型误用场景：把 header、main 这类结构容器直接套 text-align: center，发现宽度没变、位置没动——因为它们不是行内元素，不受该属性控制。
立即学习“前端免费学习笔记（深入）”；
- 仅适用于
inline或inline-block元素（比如想让一个img在父容器里水平居中） - 若真要用它“间接居中”，得先把目标块转成
display: inline-block，再给父容器加text-align: center - 这种写法会引入空白符问题（换行/空格产生间隙），需要额外处理，不推荐用于主布局
Flex 布局的简洁替代方案
如果目标容器是某个父容器的直接子元素，用 Flex 更直观，而且不需要预设宽度也能居中（当然固定宽度依然有效）。但要注意兼容性：IE10–IE11 对 Flex 支持有限，flex-direction 和 justify-content 的旧语法需前缀。
常见错误现象：在父容器上写了 display: flex，但忘了加 justify-content: center，结果子元素还是左对齐；或者误加了 align-items: center（那是垂直居中，和本题无关）。
- 父容器加：
display: flex; justify-content: center; - 子容器仍需设
width才能体现“固定宽度居中”，否则它会收缩内容宽度 - IE10–IE11 需要
-ms-flex-pack: center替代justify-content - 注意不要和
margin: 0 auto混用，Flex 下后者会被忽略
响应式场景下 max-width 比 width 更实用
纯 width: 960px 在小屏设备上会触发横向滚动条，实际项目中几乎没人这么写。更合理的做法是用 max-width + margin: 0 auto，让容器在宽屏下保持固定最大宽度，在窄屏下自动缩到 100% 宽度。
容易被忽略的细节：很多人设了 max-width 却忘了给 margin 留余地，比如在移动端加了 padding 但没调整 box-sizing，导致内容溢出或居中偏移。
- 推荐写法：
max-width: 1200px; width: 100%; margin: 0 auto; - 务必搭配：
box-sizing: border-box，否则 padding/border 会超出 max-width - 如果用了 CSS 重置（如
* { box-sizing: border-box }），这条可以省略，但别假设别人也这么写了 - 不要用
min-width替代max-width，那会导致小屏强制拉宽，体验极差
固定宽度居中看着简单，真正上线时出问题，八成卡在三个地方：没设 width 或 max-width、父容器被 float 或 position 干扰、以及 box-sizing 和 padding 的组合效应被忽略。
