text-align: center 必须作用于父容器才能使内联子元素水平居中；margin: 0 auto 需配合 display: block 和明确 width；flex 和 grid 双向居中需确保父容器有高度或宽度约束。
text-align: center 只对父容器生效，且仅水平居中
这是最轻量、兼容性最好的方式，但很多人直接写在 <img> 或 <video></video> 上，结果完全没反应——text-align 是控制「子内容」对齐的，必须加在父容器上。
-
<div style="text-align: center;"><img src="a.jpg"></div>有效；<img style="max-width:90%">无效 - 适用于
<img>、<video></video>（默认 inline）、<iframe></iframe>等内联级元素 - 如果父容器宽度塌陷（比如被
float或display: inline-block影响），居中会偏移 - 不处理垂直方向，别指望它把图片“顶到中间”
margin: 0 auto 必须搭配 display: block 和明确 width
这个组合只管水平居中，但漏掉任一条件就彻底失效。常见错误是只写 margin: 0 auto，忘了改显示模式或设宽。
-
<img src="b.png" style="max-width:90%">才能居中 -
width可以是固定值（320px）、百分比（80%）或max-width（需配合height: auto防拉伸） -
<video></video>同样适用：加display: block+width+margin: 0 auto - 对
<iframe></iframe>（如 YouTube 嵌入）也有效，但要注意 iframe 默认有边框和内边距，可能影响视觉居中
flex 布局双向居中时，父容器高度不能塌
写了 justify-content: center 却没垂直居中？大概率是父容器没高度。align-items: center 没空间可对齐，就等于没写。
- 必须三件套：
display: flex+justify-content: center+align-items: center - 父容器要有高度参照：用
min-height: 300px、height: 100vh，或由内容撑开（但内容少时仍会塌） -
上直接加display: flex会破坏原有文档流，所有直系子元素变 flex item，慎用 -
<video></video>在 flex 容器里记得加max-width: 100%和height: auto，否则可能溢出或变形
place-items: center 兼容性有限但代码最简
一行解决双向居中，但 IE 和旧 Android WebView（4.4 以下）完全不支持，上线前务必确认目标环境。
<div style="display: grid; place-items: center; min-height: 400px;"><img src="c.jpg"></div>- 比 flex 少写两个属性，语义更清晰，适合现代项目快速落地
- 注意：grid 容器默认是块级，不需要额外设
display: block；但若父容器本身是 inline，则需先转为 block - 响应式场景下，
place-items对<video></video>和<iframe></iframe>行为一致，无需特殊处理
text-align 依赖父宽，margin: 0 auto 依赖自身宽，flex 和 grid 依赖父高。没满足前提，再短的代码也白搭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
