Windows下video默认左对齐是因继承父容器行内布局,非bug;可靠居中需display:block+margin:0 auto,或Flex布局(父容器设display:flex+justify-content:center)。

video 元素默认对齐行为在 Windows 上的表现
Windows 系统下, 最直接、跨平台一致的做法是强制将 当父容器可控且项目已使用 Flex 布局时,用 所谓“靠左”有时是视觉错觉:比如视频播放器控件(尤其是自定义控件)、poster 图像尺寸偏差、父容器 padding/margin 不对称、甚至系统缩放(125% / 150%)都会导致左右偏移感。校准前务必隔离验证。 立即学习“前端免费学习笔记(深入)”; 实际居中效果是否稳定,取决于你是否切断了所有隐式对齐路径。Windows 下最易被忽略的是父容器的 元素若未显式设置 display 或 text-align,会继承父容器的行内布局逻辑,常表现为靠左对齐(尤其当父容器是 text-align: center 时)。这不是 bug,而是浏览器在不同平台对「行内替换元素」的默认渲染差异——macOS 下部分浏览器可能因字体度量或子像素渲染显得更居中,容易误判为“跨系统不一致”。
text-align: left(包括浏览器默认样式或重置 CSS 影响) 没有被包裹在 、 等行内容器中,否则会受行高、基线对齐干扰margin: 0 auto:它对非块级元素无效,而 默认是 inline
可靠居中方案:display: block + margin auto
转为块级元素,并用自动外边距居中。该方案不依赖父容器文本对齐,也不受行高影响。
display: block 和 margin: 0 auto,缺一不可max-width: 100% 配合 height: auto,否则可能拉伸变形text-align: center 来“凑效”,这会污染其他行内子元素Flex 布局居中(现代项目首选)
display: flex 更健壮,能同时处理宽高未知、多子元素、垂直居中等场景。
display: flex,不能只靠子元素自己改min-height),align-items: center 可能无视觉效果,此时需确保父容器有可计算高度flex 的 align-items 支持较弱,若需兼容,退回 display: block + margin auto
校准前先排除干扰因素
标签和基础 src,看是否仍偏左,查看 computed 样式中的 box-sizing、border、padding 是否非零object-fit: cover 或 contain,注意它只作用于视频内容区域,不影响 元素自身的盒模型定位text-align 遗留值和视频默认 inline 行内特性——这两点没处理干净,任何居中技巧都只是表面有效。











