如何在HTML中实现不同屏幕尺寸下视频上方文字的自适应定位

问题修复方案 #

导致文字偏移的核心原因有两个：

• 视频和文字模块没有共同的相对定位父容器，当前文字的绝对定位基准是整个页面根节点，屏幕尺寸变化时，视频高度和页面高度的比例发生变化，固定的top:40%就会出现错位
• 文字使用固定px字号，在小屏幕上内容溢出会进一步加剧视觉偏移

修改后的完整代码

HTML部分

<!-- 新增共同父容器包裹视频和文字模块 -->
<div class="video-wrapper">
  <video loop="loop" autoplay muted>
    <source src="/assets/images/sample.mp4" type="video/mp4">
      Your browser does not support the video tag.
  </video>

  <section id="hero" class="d-flex align-items-center">    
    <div class="container" data-aos="zoom-out" data-aos-delay="100">
      <h1>University Courses</h1>
      <h3>YOUR FIRST CHOICE IN ARABIC AND ISLAMIC STUDIES</h3>
      <div class="d-flex">
        <a href="#about" class="btn-get-started scrollto" style="font-size: 18px;">ENQUIRE HERE<i class="fas fa-arrow-right" style="padding-left: 5px;"></i></a>
      </div>
    </div>
  </section>
</div>

CSS部分

/* 父容器样式，作为定位基准 */
.video-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
/* 视频样式，永远居中填满父容器 */
video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}
#hero {
  position: absolute;
  /* 用transform修正垂直居中偏移，永远基于父容器居中 */
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
#hero h1 {
  margin: 0;
  /* 响应式字号，小屏自动缩小，大屏不超过最大尺寸 */
  font-size: clamp(24px, 5vw, 48px);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  font-family: "Poppins", sans-serif;
  text-align: center;
}
/* 补充h3的响应式样式，避免小屏溢出 */
#hero h3 {
  font-size: clamp(16px, 3vw, 24px);
  text-align: center;
  color: #fff;
  margin: 12px 0 24px;
}

修改后文字会一直基于视频容器垂直居中，字号会随屏幕尺寸自适应变化，不会再出现不同设备下偏移的问题。

内容的提问来源于stack exchange，提问作者راجہ سفیان