iframe默认行内元素，margin:0 auto需先设display:block并指定width；flex布局最省心，父容器需设height和display:flex；absolute定位需父容器position:relative及transform:translate(-50%,-50%)。
iframe 默认是行内元素，直接加 margin: 0 auto 或 text-align: center 很可能无效——不是写法错，而是没满足前提条件。
为什么 margin: 0 auto 对 iframe 没反应
因为 iframe 默认是 display: inline（或 inline-block），而 margin: auto 只对块级元素生效。强行加了也不会居中。
- 必须先显式设
display: block，再配width（不能是100%）和margin: 0 auto - 父容器不能是
display: flex或display: grid，否则会覆盖auto行为 - 常见错误：写了
margin: 0 auto却忘了display: block，结果 iframe 还贴着左边
用 flex 居中 iframe 最省心
给 iframe 的直接父容器加 display: flex，一行代码就能同时搞定水平+垂直居中，且不依赖 iframe 尺寸。
- 父容器必须有明确高度（比如
height: 100vh或固定值），否则align-items: center无效果 - 避免在父容器上同时用
float、vertical-align，它们会被 flex 完全忽略 - 如果父容器里还有其他元素，注意它们也会变成 flex 项目，布局逻辑会整体改变
position: absolute + transform 适合脱离文档流场景
当 iframe 需要盖在内容上方（比如弹窗、预览层），用绝对定位更可控。
- 父容器必须设
position: relative，否则top: 50%会相对于视口计算，滚动时偏移 -
transform: translate(-50%, -50%)是关键，它基于自身宽高偏移，不需要提前知道尺寸 - 别漏掉
left: 50%和top: 50%，只写一个方向只会单向偏移
真正容易被忽略的点是：居中效果是否随窗口缩放或滚动保持稳定。用 flex 或 grid 的方案天然响应式；而 absolute 方案一旦父容器高度靠内容撑开，就可能失效——这时候得回退到 JS 监听 resize 动态重算，反而更重。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
