html - 在固定宽度容器内居中绝对元素

Question

我有一个固定大小的父级，其中包含一个图像和嵌套在其中的绝对文本元素。

我希望 .video-text 以浏览器窗口大小为中心，而不是父 div 的固定宽度。

HTML:

<div class="video-bg">
    <img src="../images/video-bg.jpg" />
    <div class="video-text ">
       <a href="#"><h3> Watch the video to learn more</h3></a>
    </div>
</div>

CSS:

.video-bg {
    position: relative;
    overflow: hidden;
    width: 1280px;
}
.video-bg img {
    width: 100%;
}
.video-text {
    position: absolute;
    top: 44%;
    left: 50%;
}

Answer 1

尝试将位置设置为静态而不是相对。

一个位置为静态的元素；没有以任何特殊方式定位；它始终根据页面的正常流程定位。