video元素在macOS Safari中顶部偏移的根源是其按baseline对齐的默认渲染行为，与CSS规范中替换元素基线定义的跨浏览器差异有关；解决方案是设display:block并配合flex居中或text-align/margin:auto，同时显式声明宽高、避免poster干扰。

video 元素在 macOS Safari 中顶部偏移的根源 macOS 上的 <video></video> 默认渲染行为与 Linux/Windows 不同，尤其在 Safari 中：它会把视频内容（尤其是带 poster 或首帧未加载时）按 baseline 对齐，而父容器若使用 flex 或 vertical-align: middle，容易因行内替换元素的基线计算偏差导致视觉上“位置偏高”。这不是 bug，是 CSS 规范中对替换元素基线定义的跨浏览器差异。

关键点：该问题在 Chrome/Firefox/macOS 上也可能复现，但 Safari 最明显；且仅影响未显式设置对齐方式的 <video></video>。

用 display: block + margin: auto 实现真正居中 这是最稳定、跨平台兼容的方案，绕过基线对齐逻辑：

• 给 <video></video> 设置 display: block，使其脱离行内布局上下文
• 父容器设为 display: flex 且 justify-content: center; align-items: center
• 或父容器设 text-align: center，再配合 margin: 0 auto（适用于块级父容器）

<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
  <video src="demo.mp4" controls style="display: block; max-width: 100%; height: auto;"></video>
</div>

注意：height: auto 必须保留，否则可能拉伸变形；max-width: 100% 防止溢出。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

避免 poster 导致的额外偏移 Safari 在加载 poster 图片时，会先渲染一张「占位图」，其尺寸和基线行为独立于视频流。如果 poster 比例与视频不一致，或未指定 width/height，会导致容器高度抖动，进而影响居中效果。

• 始终为 <video></video> 显式声明 width 和 height（即使只是占位值，如 width="640" height="360"）
• 确保 poster 图片宽高比与视频一致，否则 Safari 可能按 poster 的 intrinsic size 计算基线
• 若不需要 poster，直接移除属性，比留空更可靠（poster="" 仍会触发加载逻辑）

慎用 vertical-align: middle 这个属性对 <video></video> 无效或副作用大：它只对 display: inline 或 inline-block 元素生效，而默认的 <video></video> 是 inline，但基线位置由内部媒体帧决定，不可控。

• 加 vertical-align: middle 后，Safari 可能将整个元素上推 2–4px（取决于字体大小）
• Chrome 有时表现正常，但一换字体或 zoom 级别就失效
• 若必须用 inline 布局（如嵌入文字流），改用 vertical-align: top 或 bottom，并配 line-height: 0 清除行高干扰

真正需要垂直居中时，flex + block 是唯一值得依赖的组合。其他写法看似简洁，实则把问题交给了浏览器去猜——而 Safari 猜得最不一致。