如何将视频定位在背景图片中央？前端CSS布局求助

问题核心问题点 #

1. .wrapper 设置 height: 0 导致容器无高度，背景图无法正常展示
2. 视频使用绝对定位但未给父容器 .wrapper 设置相对定位，定位基准错误
3. 背景图未按16:9（1920*1080的原生比例）维持容器比例，适配时易变形
4. 视频缺少居中对齐的样式设置

具体修改方案 #

1. 修复容器高度与背景图适配

针对1920*1080的16:9比例，用 padding-top: 56.25%（1080/1920=0.5625）维持容器宽高比，同时优化背景图显示逻辑：

• 用 background-size: cover 保证背景图覆盖容器（保持比例，超出部分裁剪），或用 contain 完整显示背景图（根据需求二选一）
• 添加 background-position: center 确保背景图居中

2. 实现视频精准居中

• 给 .wrapper 添加 position: relative，让视频绝对定位以该容器为基准
• 通过 left: 50% + transform: translateX(-50%) 实现水平居中，同时用 height: auto 维持视频自身比例

修改后的完整代码 #

CSS 代码

.container {
  width: 100%;
  margin-top: 20px;
}

.paragrah-desktop {
  display: flex;
  gap: 20px; /* 左右div之间的间距 */
}

.wrapper {    
  border: 2px solid black;
  background: url(/static/imgs/bg_video.png); 
  background-size: cover; /* 覆盖容器并保持比例，如需完整显示改用background-size: contain */
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  position: relative; /* 作为视频定位的父容器 */
  padding-top: 56.25%; /* 固定16:9比例 */
}

video {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%; /* 可根据需求调整宽度，建议保持16:9比例 */
  height: auto; /* 自动维持视频原有比例 */
  border: 2px solid #7cd959;
}

HTML 代码

<section class="container" id="header">
  <div class="paragrah-desktop">
    <div class="subheader">
      <h1 class="desktop-title">UPGRADE ALERTS</h1>
      <button type="button" class="btn" data-toggle="modal" data-target="#exampleModal">Join</button>
      <p class="header-p">Coming to you July 2023</p>
    </div>
    <div class="wrapper">
      <video controls>
        <source src="{% static 'imgs/mobile_video.webm' %}" type="video/webm">
      </video>
    </div>
  </div>
</section>

额外优化建议 #

如果需要更合理的左右布局分配，可以给 .subheader 和 .wrapper 设置宽度比例，比如：

.subheader {
  flex: 0 0 30%; /* 左侧固定占30%宽度 */
}
.wrapper {
  flex: 1; /* 右侧占剩余宽度 */
}

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