"responsive" 居中对齐的视频文本叠加层

Question

我正在尝试显示一个全宽视频，其中的叠加文本垂直和水平居中。居中定位应响应视口宽度的变化，使其始终居中。另外，无论视口的大小如何，我都希望始终在视频正下方显示“标题”（示例中的 h2 标签）。

我附上了我的示例代码 - 感谢您的帮助。

谢谢

丹尼斯

<head>
<style>

.header-unit {
       margin-top: 10px;
     }
     
#video-container {
       height:100%;
       width:100%;
       overflow: hidden;
       position: relative;
     }

#video-overlay {
       position: absolute;
       z-index: 1;
       font-size: 50px;
       color: red;
       margin: 0;
       transform: translate(-50%, -50%);
       width: 85%;
       text-align: center;
       top: 25%;
       left: 50%;
     }

video {
       position: absolute;
       z-index: 0;
     }
     video.fillWidth {
      width: 100%;
     }
     
</style>
</head>
    <div class="header-unit">
        <div id="video-container">
            <p id="video-overlay">Get A Quote!</a></p>
            <video autoplay muted loop class="fillWidth">
              <source src="https://www.w3schools.com/html/mov_bbb.mp4"/>
            </video>
        </div>
    </div>  
<h2>Test Caption</h2>

Answer 1

请用此更新您的 css 并检查：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.header-unit {
       margin-top: 10px;
  height: 100%;
     }
     
#video-container {
       height:100%;
       width:100%;
       overflow: hidden;
       position: relative;
     }

#video-overlay {
       position: absolute;
       z-index: 1;
       font-size: 50px;
       color: red;
       margin: 0;
       transform: translate(-50%, -50%);
       width: 85%;
       text-align: center;
       top: 50%;
       left: 50%;
     }

video {
       position: absolute;
       z-index: 0;
     }
     video.fillWidth {
      width: 100%;
           height: 100%;
    object-fit: cover;
     }

<div class="header-unit">
        <div id="video-container">
            <p id="video-overlay">Get A Quote!</a></p>
            <video autoplay muted loop class="fillWidth">
              <source src="https://www.w3schools.com/html/mov_bbb.mp4"/>
            </video>
        </div>
    </div>  
<h2>Test Caption</h2>

"responsive" 居中对齐的视频文本叠加层

Video text overlay with "responsive" center alignment

html

css

video

overlay