video 默认左上角定位是标准行为而非bug，因HTML5 video为块级元素，遵循流式布局；居中推荐绝对定位+transform或Flexbox，需确保父容器有定位上下文和明确宽高。

video 默认定位在左上角是浏览器行为，不是 bug

HTML5 <video> 元素没有默认居中逻辑，它和 <div> 一样，块级元素会自然从父容器左上角开始流式布局。如果你没设任何 CSS 定位或对齐规则，它就老老实实待在左上角——这不是偏移异常，是标准表现。

• 不同浏览器不会“统一错”，而是“统一对”：Chrome、Safari、Firefox 都按规范把未样式化的 <video> 放在 content box 的 (0, 0) 起点
• Vue/React 项目里更易被误判为“保存后偏左”，其实是组件挂载时父容器没设宽高，导致 video 按最小尺寸渲染并贴左上
• 检查方法：临时加一句 video { outline: 2px solid red; }，看红色框是否紧贴容器左上边缘

用 position + transform 居中是最稳的通用解法

不依赖 Flexbox 或 Grid 的兼容性（尤其要支持 iOS Safari 12+ 或旧版 Android WebView），直接用绝对定位 + 位移是最可靠的选择：

• 父容器必须设 position: relative; 或 position: absolute;，否则 top/left 无效
• video 自身设 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
• 别漏掉 transform ——只靠 top: 50% 会让视频顶部对齐中线，实际是“下半截居中”，加上 translate(-50%, -50%) 才真正中心锚定
• 若视频需响应式缩放，加 max-width: 100%; max-height: 100%;，并确保父容器有明确宽高（比如 height: 100vh;）

Flexbox 居中更快但要注意父容器约束

现代项目首选 display: flex，写法极简，但容易因父级缺失关键样式而失效：

wechat mp push 微信公众号图文生成与推送技能

支持AI生成符合公众号规范的图文，推送至草稿箱；兼容其他技能生成的图文/图片。通过向导扫码授权，支持多账号；无需暴露Secret密钥或配置IP白名单。

下载

• 父容器必须同时设 display: flex;、justify-content: center;、align-items: center;
• 父容器自身得有可计算的高度，比如 min-height: 100vh;；仅写 height: 100%; 在多数嵌套场景下会塌成 0
• 如果视频外层还包了 <div class="video-wrapper">，别忘了这个 wrapper 就是 Flex 容器，不是再往上的 body 或 app 根节点
• 慎用 flex: 1; 给 video ——它会拉伸视频破坏宽高比，应优先用 align-self: center; 配合 max-width/max-height

移动端 iframe 嵌入视频时左移？先查 viewport 和 margin

当 <video> 是通过 <iframe> 加载的第三方页面（如腾讯视频、Bilibili 分享页），左移往往和嵌入环境有关，而非 video 本身：

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

• 父页面缺 <meta name="viewport" content="width=device-width, initial-scale=1">，导致 iframe 内容被强制缩放，视觉左偏
• iFrame 默认有 margin: 4px 2px;（尤其 Android WebView），加 style="margin: 0;" 和 frameborder="0" 可清除
• iFrame 宽度写死（如 width="640"）在小屏上必然溢出左移，必须改用 width: 100%; + height: 0; + padding-bottom 维持比例
• 微信内置浏览器对 vh 支持差，若父容器用了 height: 100vh;，换成 height: 100%; 并确保所有祖先都有 height: 100%; 向下透传

真实问题往往卡在“以为改了 video 样式就行”，其实父容器的定位上下文、视口设置、嵌套层级才是关键。动手前先用 DevTools 逐层检查 computed styles，比盲调 margin-left: -10px 有效得多。