块元素用 margin: auto 居中需父容器有明确宽度且自身设固定宽度；flex 布局更可靠，grid 一行代码居中，绝对定位配合 transform 适合脱离文档流场景。
块元素用 margin: auto 居中需要满足什么条件
块元素仅靠 margin: auto 无法居中，必须同时满足两个前提：父容器有明确宽度（不能是 100% 或 fit-content），且该块元素本身也要设置固定宽度（如 width: 300px 或 width: 50%）。否则浏览器会按默认行为把左右外边距都算作 0。
常见错误现象：div 写了 margin: 0 auto 却纹丝不动——大概率是忘了设 width，或父容器用了 display: flex 等干扰布局的样式。
- 推荐写法：
width: 300px; margin: 0 auto; - 如果父容器是
body，注意body默认有margin，建议先重置：body { margin: 0; } - 不推荐用
text-align: center搞块级居中——它只对行内内容有效，对块元素本身无效（除非配合display: inline-block）
flex 布局让块元素水平居中更可靠
现代项目首选 display: flex，父容器加两行样式就能稳稳居中，不依赖子元素宽高，也不怕内部有浮动或绝对定位干扰。
实操写法：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
justify-content: center;
}
- 子元素无需设
width，也无需margin - 如果还想垂直居中，加一行：
align-items: center; - 注意兼容性：IE10+ 支持，但 IE10/11 对
flex的某些属性（如flex-wrap）有 bug，纯居中场景基本无坑
position + transform 组合适合绝对定位场景
当块元素必须脱离文档流（比如模态框、提示气泡），用 position: absolute 配合 transform 是最精准的居中方式，且不依赖父容器宽度是否已知。
关键代码：
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
- 父容器需设
position: relative（否则absolute会相对于视口定位） -
transform是偏移自身宽高的 50%，所以无论.box宽高是否固定、是否响应式，都能居中 - 避免用
margin-left: -150px这类“猜尺寸”写法——一旦宽高变，就要同步改负边距
grid 布局一行代码搞定居中
如果父容器可以改用 display: grid，居中变得极其简单，尤其适合多列或多层嵌套结构。
最小可行写法：
.container {
display: grid;
place-items: center;
}
-
place-items: center等价于justify-items: center; align-items: center; - 子元素不用任何额外样式，甚至不需要知道自己的尺寸
- 兼容性略低于 flex（IE 完全不支持），但 Chrome/Firefox/Safari/Edge 16+ 都稳
真正容易被忽略的是：居中不是“加一个样式就行”，而是要先判断上下文——这个块是否要脱离流？父容器能否改布局模式？是否要考虑老版本浏览器？选错方案，后面调试花的时间远超写代码本身。
