video元素在macOS Safari中顶部偏移的根源是其按baseline对齐的默认渲染行为，与CSS规范中替换元素基线定义的跨浏览器差异有关；解决方案是设display:block并配合flex居中或text-align/margin:auto，同时显式声明宽高、避免poster干扰。
video 元素在 macOS Safari 中顶部偏移的根源
macOS 上的 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（适用于块级父容器）
display: block，使其脱离行内布局上下文display: flex 且 justify-content: center; align-items: center
text-align: center，再配合 margin: 0 auto（适用于块级父容器）注意：height: auto 必须保留，否则可能拉伸变形；max-width: 100% 防止溢出。
避免 poster 导致的额外偏移
Safari 在加载 poster 图片时，会先渲染一张「占位图」，其尺寸和基线行为独立于视频流。如果 poster 比例与视频不一致，或未指定 width/height，会导致容器高度抖动，进而影响居中效果。
- 始终为
width 和 height（即使只是占位值，如 width="640" height="360"）
- 确保
poster 图片宽高比与视频一致，否则 Safari 可能按 poster 的 intrinsic size 计算基线
- 若不需要 poster，直接移除属性，比留空更可靠（
poster="" 仍会触发加载逻辑）
慎用 vertical-align: middle
这个属性对 display: inline 或 inline-block 元素生效，而默认的 inline，但基线位置由内部媒体帧决定，不可控。
- 加
vertical-align: middle 后，Safari 可能将整个元素上推 2–4px（取决于字体大小）
- Chrome 有时表现正常，但一换字体或 zoom 级别就失效
- 若必须用 inline 布局（如嵌入文字流），改用
vertical-align: top 或 bottom，并配 line-height: 0 清除行高干扰
width 和 height（即使只是占位值，如 width="640" height="360"）poster 图片宽高比与视频一致，否则 Safari 可能按 poster 的 intrinsic size 计算基线poster="" 仍会触发加载逻辑）display: inline 或 inline-block 元素生效，而默认的 inline，但基线位置由内部媒体帧决定，不可控。
- 加
vertical-align: middle后，Safari 可能将整个元素上推 2–4px（取决于字体大小） - Chrome 有时表现正常，但一换字体或 zoom 级别就失效
- 若必须用 inline 布局（如嵌入文字流），改用
vertical-align: top或bottom，并配line-height: 0清除行高干扰
真正需要垂直居中时，flex + block 是唯一值得依赖的组合。其他写法看似简洁，实则把问题交给了浏览器去猜——而 Safari 猜得最不一致。
