结论：margin: 0 auto仅适用于有明确宽度的块级元素水平居中，display: flex+justify-content+align-items是现代项目最稳的全居中方案；text-align:center用于父容器内联内容，不作用于自身。
新手做页面布局，最常卡在“怎么让内容居中”这一步。直接说结论：margin: 0 auto 适合单个定宽块水平居中，display: flex + justify-content + align-items 是现代项目里最稳、最易懂的全居中方案——别碰绝对定位和表格法，它们徒增理解成本。
用 margin: 0 auto 居中一个 div，为什么总失败？
它只对**有明确宽度的块级元素**生效，不是万能居中开关。
- 必须写
width（比如width: 600px或width: 80%），不写就默认 100%，margin: 0 auto没空间可分 - 父容器不能是
display: inline-block或浮动后塌陷的盒子，否则子元素找不到“可居中的上下文” -
text-align: center对这个 div 本身无效——那是给它的子文本用的，不是给它自己用的 - 它只管水平方向，垂直方向完全没反应
display: flex 实现水平+垂直居中，关键在哪？
不是光写 justify-content: center 就完事，缺一不可。
- 父容器必须设
display: flex，且要有高度支撑（比如height: 100vh或内部内容撑开） - 必须同时写
justify-content: center（水平）和align-items: center（垂直） - 子元素不用加任何样式，也不用设宽高，flex 会自动处理
- IE10/11 支持基本居中，但慎用
flex-wrap或gap等高级属性
文本居中、图片居中、整个页面居中，该用哪个？
别混用同一套逻辑，不同对象对应不同规则：
- 段落文字或按钮文字：给它的父容器加
text-align: center - 一张
<img>居中：设display: block后再加margin: 0 auto（不能只靠text-align） - 整个页面内容区域（比如
<main></main>）：用display: flex包一层或外层容器，比反复调margin更干净 - 弹窗类浮层：才考虑
position: absolute+transform: translate(-50%, -50%)，日常布局真用不上
新手最容易忽略的是：居中不是孤立操作，它依赖父容器的尺寸、显示模式和文档流状态。先确认你要居中的对象类型，再选方法，比硬套代码更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
