要使水平居中，需设display: block再加margin: 0 auto；水平+垂直居中推荐父容器用display: flex、justify-content: center和align-items: center；iframe和同理，但需注意父容器高度及控件兼容性。
直接给 <video></video> 或 <audio></audio> 加 margin: 0 auto 不起作用——因为它们默认是 inline 元素，不是块级；想居中，得先让它“变成能被居中的东西”。
让 <video></video> 水平居中：必须设 display: block
浏览器把 <video></video> 当作 inline-level 元素处理，margin: 0 auto 对它无效。你得显式告诉它：“我要当块级元素”。
- 给
<video></video>加display: block，再加margin: 0 auto - 父容器无需特殊设置，但自身要有宽度上下文（比如不是
display: flex的子项） - 如果用了
width: 100%，margin: 0 auto就没空间可分，会失效 - 常见错误：只加
margin: 0 auto却忘了display: block，结果视频靠左不动
让 <video></video> 水平+垂直居中：用 Flex 布局最稳
单靠 CSS 居中多媒体元素的垂直方向，margin 和 text-align 都无能为力；Flex 是目前最可靠、代码最少的解法。
- 父容器设
display: flex、justify-content: center（水平）、align-items: center（垂直） - 父容器必须有明确高度，比如
height: 100vh或固定像素值，否则align-items无法计算垂直中点 -
<video></video>自身不用设display或width，Flex 会自动处理尺寸和对齐 - 别把
display: flex直接加在上——body 缺少显式高度，align-items很可能不生效
嵌入式 <iframe></iframe> 视频（如 YouTube）怎么居中？和 <video></video> 逻辑一致
第三方视频 iframe 默认也是 inline 元素，不能直接靠 text-align: center 居中——那只是让“文字内容”居中，不是让 iframe 本身居中。
- 方案一：父容器设
text-align: center，iframe 设display: inline-block - 方案二（推荐）：父容器设
display: flex+justify-content: center，iframe 保持默认即可 - 如果 iframe 高度由 JS 动态注入（如某些播放器 SDK），要等加载完成后再触发重排，否则初始高度可能为 0，导致居中错位
- 避免给 iframe 设
position: absolute后再用transform: translate(-50%, -50%)——它脱离文档流，可能遮挡其他内容，且响应式下容易失控
<audio></audio> 标签居中特别注意：控件高度不可控
<audio controls></audio> 渲染出的原生控件高度因浏览器而异（Chrome 约 36px，Safari 可能更高），用 Flex 垂直居中时，父容器高度若刚好卡在临界值，容易出现“看起来偏上/偏下”的错觉。
- 建议父容器高度至少设为
min-height: 60px，留出安全余量 - 不要依赖
vertical-align: middle——它只对 inline 元素有效，且需配合line-height或display: table-cell，复杂度远超必要 - 若需完全自定义样式，不如用
<audio></audio>+ 自制控件，把播放器逻辑抽离，CSS 控制权才真正归你
真正容易被忽略的点是：所有居中方案都依赖“父容器有可计算的空间”。哪怕用了 Flex，如果父容器高度塌陷（比如子元素浮动或未清除），align-items: center 就只是摆设。检查父容器是否渲染出实际高度，比反复调 margin 更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
