video 默认左上角定位是标准行为而非bug，因html5 video为块级元素，遵循流式布局；居中推荐绝对定位+transform或flexbox，需确保父容器有定位上下文和明确宽高。
video 默认定位在左上角是浏览器行为，不是 bug
html5 元素没有默认居中逻辑，它和
一样，块级元素会自然从父容器左上角开始流式布局。如果你没设任何 css 定位或对齐规则，它就老老实实待在左上角——这不是偏移异常，是标准表现。
- 不同浏览器不会“统一错”，而是“统一对”：chrome、safari、firefox 都按规范把未样式化的
放在 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，写法极简，但容易因父级缺失关键样式而失效：
- 父容器必须同时设
display: flex;、justify-content: center;、align-items: center; - 父容器自身得有可计算的高度，比如
min-height: 100vh;；仅写height: 100%;在多数嵌套场景下会塌成 0 - 如果视频外层还包了 ，别忘了这个 wrapper 就是 Flex 容器，不是再往上的 body 或 app 根节点
- 慎用
flex: 1;给 video ——它会拉伸视频破坏宽高比，应优先用align-self: center;配合max-width/max-height移动端 iframe 嵌入视频时左移？先查 viewport 和 margin
当
是通过加载的第三方页面（如腾讯视频、Bilibili 分享页），左移往往和嵌入环境有关，而非 video 本身：立即学习“前端免费学习笔记（深入）”；
- 父页面缺
，导致 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有效得多。 - 慎用