video 默认为内联元素，需设 display: block 才能用 margin: 0 auto 水平居中；父容器用 flex 布局可实现水平垂直居中；iframe 同理，响应式推荐 aspect-ratio 或 max-width 控制。

video 标签默认不居中，必须显式设置 display

直接写 <video src="xxx.mp4" controls></video>，视频会靠左对齐——这不是 bug，是浏览器默认把 <video> 当作内联元素处理。想用 margin: 0 auto 居中？先得让它变成块级元素，否则 margin 不生效。

常见错误：只加 margin: 0 auto 却忘了设 display: block，结果毫无反应。

• 正确做法：给 <video> 加 style="display: block; margin: 0 auto;"
• 更稳妥写法：用 class 封装，避免内联样式污染结构
• 注意：如果父容器宽度不够（比如被其他浮动元素挤压），margin: 0 auto 也会失效

需要水平+垂直居中？flex 是最简方案

当视频要放在页面正中央（比如登录页引导视频、模态框预览），仅水平居中不够。这时直接对父容器用 flex，比老式 table-cell 或绝对定位更可靠。

关键点不是“怎么写”，而是“写在哪”：必须作用在 <video> 的**直接父容器**上。

立即学习“前端免费学习笔记（深入）”；

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 父容器加 style="display: flex; justify-content: center; align-items: center; height: 100vh;"
• height: 100vh 确保父容器撑满视口高度，否则 align-items: center 没效果
• 不用给 <video> 设 display 或 margin，它自动成为 flex item

iframe 嵌入的 YouTube/优酷视频同样适用

第三方视频如 <iframe src="https://www.youtube.com/embed/xxx"></iframe>，本质也是替换元素（replaced element），行为和 <video> 一致。

别用过时的 <div align="center">——HTML5 已废弃该属性，且对 iframe 无效。

• 推荐：包裹一层 <div class="video-wrapper">，再对其应用 flex 或 text-align: center + display: inline-block
• 若用 text-align: center，必须确保 iframe 设为 display: inline-block，否则不响应居中
• 移动端要注意：某些 iframe（如优酷）可能自带固定宽高，需额外加 width: 100% 配合 max-width 控制缩放

响应式场景下 width 和 height 容易踩坑

硬写 width="640" height="360" 属性会导致在小屏上溢出或拉伸变形；但全用 CSS 百分比又可能让视频高度塌陷。

真正可控的方式是用 aspect-ratio（现代浏览器支持）或 padding-bottom 技巧模拟固有宽高比。

• 安全写法：去掉 HTML 中的 width/height 属性，改用 CSS 控制
• 例如：video { width: 100%; max-width: 800px; height: auto; }
• 若需保持 16:9 比例且内容不拉伸，用 aspect-ratio: 16 / 9 + object-fit: cover（注意 Safari 旧版本不支持 aspect-ratio）

实际居中效果是否成立，取决于三件事：元素是否块级化、父容器是否有明确尺寸、CSS 是否作用到正确层级。漏掉任何一环，都会让“居中”变成玄学。