块元素用 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，父容器加两行样式就能稳稳居中，不依赖子元素宽高，也不怕内部有浮动或绝对定位干扰。
实操写法：
立即学习“前端免费学习笔记（深入）”；
