video元素在macOS Safari中顶部偏移的根源是其按baseline对齐的默认渲染行为，与CSS规范中替换元素基线定义的跨浏览器差异有关；解决方案是设display:block并配合flex居中或text-align/margin:auto，同时显式声明宽高、避免poster干扰。
video 元素在 macOS Safari 中顶部偏移的根源
macOS 上的 默认渲染行为与 Linux/Windows 不同，尤其在 Safari 中：它会把视频内容（尤其是带 poster 或首帧未加载时）按 baseline 对齐，而父容器若使用 flex 或 vertical-align: middle，容易因行内替换元素的基线计算偏差导致视觉上“位置偏高”。这不是 bug，是 CSS 规范中对替换元素基线定义的跨浏览器差异。
关键点：该问题在 Chrome/Firefox/macOS 上也可能复现，但 Safari 最明显；且仅影响未显式设置对齐方式的 。
用 display: block + margin: auto 实现真正居中
这是最稳定、跨平台兼容的方案，绕过基线对齐逻辑：
- 给
设置display: block，使其脱离行内布局上下文 - 父容器设为
display: flex且justify-content: center; align-items: center - 或父容器设
text-align: center，再配合margin: 0 auto（适用于块级父容器）
注意：height: auto 必须保留，否则可能拉伸变形；max-width: 100% 防止溢出。
