网站全屏背景视频定位需求：顶部居中区域始终可见

嘿，我来帮你搞定这个需求！你的原始代码是让视频整体居中显示，但现在要改成顶部中间的核心内容永远不被裁剪，侧边或底部可以接受裁剪，对吧？下面给你两种靠谱的解决方案：

方案一：用object-position实现（最简洁推荐） #

这种方式不用复杂的容器嵌套，直接给视频元素设置样式就行，逻辑清晰还易维护：

.vidwrap {
  position: fixed; /* 用fixed保证滚动时视频也固定在全屏 */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持视频比例，填满整个容器，超出部分裁剪 */
  object-position: top center; /* 关键！让视频的顶部中间和容器对齐 */
}

关键逻辑说明 #

• object-fit: cover：确保视频按原比例缩放，完全覆盖容器，多余的部分（底部或者左右）会被自动裁剪，正好符合你的需求。
• object-position: top center：强制视频的顶部中间区域和容器的顶部中间对齐，不管屏幕怎么缩放、横竖屏切换，这部分核心内容都能稳稳地留在视野里。

方案二：基于你现有代码修改 #

如果你想沿用自己的容器结构，只需要调整定位参数就可以：

.vidwrap {
  position: absolute;
  top: 0; /* 把原来的-50%改成0，让容器顶部对齐屏幕顶部 */
  left: -50%;
  width: 200%;
  height: 200%;
  overflow: hidden;
}

video {
  position: absolute;
  top: 0; /* 视频顶部对齐容器顶部 */
  left: 50%; /* 让视频水平居中 */
  transform: translateX(-50%); /* 水平偏移实现真正居中 */
  min-width: 50%; /* 确保至少覆盖屏幕宽度 */
  min-height: 100%; /* 确保至少覆盖屏幕高度 */
}

实用小提醒 #

• 建议把position: absolute换成fixed，这样页面滚动的时候，背景视频不会跟着跑，始终保持全屏效果。
• 记得在不同屏幕尺寸（手机横竖屏、桌面宽屏）测试一下，确保顶部中间的内容真的不会被裁剪哦！

内容的提问来源于stack exchange，提问作者jessy20