video默认inline导致margin:0 auto无效，需设display:block/inline-block或父容器text-align:center；flex居中更可靠，calc()在此场景无必要。
video 元素默认是内联的，直接加 margin: 0 auto 不生效
很多人给 加 margin: 0 auto 发现完全没反应——不是写错了，是它根本不是块级元素。HTML5 规范里 默认 display: inline，而 margin: auto 对内联元素左右无效。
- 必须先让它变成块级或行内块，才能用传统居中法
- 最轻量解法：父容器加
text-align: center，保持原样即可水平居中（来自 2011 年实测有效，至今仍可靠） - 若需控制宽高、加边框或与其他块元素对齐，推荐显式设
display: block或display: inline-block后再居中
calc() 在 video 居中里基本用不上，别硬套
calc() 是用来动态计算尺寸的，比如 width: calc(100% - 20px) 或 left: calc(50% - 200px)。但视频水平居中根本不需要算减法——它不依赖固定像素偏移，也不靠“父宽一半减自身一半”这种手动推算。
- 用
text-align: center：零计算，纯声明式，兼容到 IE8+ - 用 Flex：父容器
display: flex; justify-content: center，不关心 video 宽高，calc()完全无用武之地 - 只有当你用绝对定位 + 固定宽度 + 手动
margin-left: -200px时，calc()才可能替代硬编码，但这种写法本身已过时
真正该防的坑：宽高未设导致“居中了却看不见”
视频标签如果没有 width 和 height，或只设一个，浏览器可能按原始比例渲染出极窄/极高的条状，看着像“没居中”，其实是内容太小被挤在左上角。
- 加
width: 100%; max-width: 800px;是更健壮的做法，比固定像素更适配响应式 - 如果父容器没设
width或text-align，哪怕写了text-align: center也无效——父容器得是块级且有足够宽度 - 避免同时用
float或position: absolute，它们会让脱离文档流，text-align和margin: auto都失效
移动端和全屏场景下，flex 是唯一稳解
当页面要适配手机、横竖屏切换，或视频需要撑满容器又保持比例时，text-align 就不够用了——它只管水平，不管垂直，也不控缩放。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex; justify-content: center; align-items: center;，再加height: 100vh或明确高度，video 自动居中且不溢出 - 配合
object-fit: contain或cover控制缩放行为，比靠calc()算宽高靠谱得多 - 注意：iOS Safari 旧版对
align-items: center在 flex 容器里的表现偶有偏差，加min-height: 1px到 video 上可缓解
video 居中本质是布局问题，不是计算问题。把元素类型、文档流状态、父容器约束理清楚，比套任何公式都管用。calc() 很强大，但它在这里只是干扰项。
