将固定宽度容器内的绝对元素居中

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

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

一个位置为static的元素;没有任何特殊的定位;它总是根据页面的正常流程定位。