如何使用HTML和CSS将logo图片居中叠加在背景视频上

• 选择器匹配完全错位：CSS中使用ID选择器#overlay配置样式，但HTML中没有任何带id="overlay"的元素，仅有的logo标签是class="overlay"的img，所有写在#overlay里的规则根本不会作用到logo上
• 定位参照基准缺失：包裹视频和logo的外层div没有设置position: relative，内部的绝对定位元素全部失去了固定参照，位置会随页面缩放、滚动出现不可控偏移
• 居中规则配置残缺：仅给不存在的#overlay写了top:50%，既没有给logo元素设置定位属性，也没有配置水平居中的规则，更没有通过平移修正元素自身尺寸带来的垂直方向偏移
• 基础样式配置错误：背景视频#reel被设置了visibility: hidden会直接隐藏视频，同时带了top: 8px的偏移，破坏了视频全屏覆盖背景的效果，配合缺失的容器尺寸，视频位置无法和logo形成统一的居中参照

按照以下调整代码即可实现随页面缩放始终居中的效果：

1. 给外层包裹容器加相对定位，作为内部所有元素的位置参照
2. 把视频的定位调整为完全覆盖容器，去掉无意义的隐藏属性和偏移
3. 把logo的样式选择器从ID选择器改为类选择器，配置完整的居中规则

/* 外层容器：作为定位参照 */
.video-wrapper {
  position: relative;
  width: 100%;
  height: 100vh; /* 根据实际区块需求调整高度值 */
  overflow: hidden;
}

/* 背景视频样式 */
#reel {
  position: absolute;
  inset: 0; /* 等价于top/right/bottom/left全部为0，实现完全覆盖容器 */
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持视频比例，避免拉伸变形 */
  z-index: 1;
}

/* 居中logo样式 */
.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  z-index: 2; /* 确保logo在视频上层不被遮挡 */
}

对应调整HTML结构，给外层div加上类名即可：

<!-- BACKGROUND REEL--> 
<div class="video-wrapper">
  <video playsinline autoplay muted loop id="reel">
    <source src="Media/Reel.mp4" type="video/mp4">
  </video>
  <img class="overlay" src="Media/Transparent.png">
</div>

• 所有叠加元素均以固定的外层容器为位置参照，页面尺寸缩放时，容器会同步适配视口大小
• 配合top:50%、left:50%加transform: translate(-50%, -50%)的居中逻辑，无论logo自身尺寸如何变化，都会始终保持在容器正中心，不会出现偏移
• 视频配置object-fit: cover后，会自动适配容器宽高比填充背景，不会出现黑边或拉伸变形

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