HTML5視頻上方的H1文本

Question

我有一個背景視頻，我想在其頂部浮動文字。 當前看起來像這樣：

綠色橫幅是視頻，我希望黑色標題文本浮在視頻頂部。

具體來說，我希望將文本水平和垂直對齊。 所以看起來像這樣：

這是到目前為止我嘗試過的代碼...

的HTML

<div class="homepage-video">

        <video autoplay loop muted>
          <source src="https://player.vimeo.com/external/208845912.hd.mp4?s=2c04fe329c04029926a99943f076c84c6b86bb46&profile_id=119" type="video/mp4">
        </video>


        <div class="text-over-video">
            <h1>HEADING TEXT GOES HERE</h1>
        </div>

    </div>

的CSS

.homepage-video video {
    position:relative;
    width: 100%;
    height: auto;
    display:table;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 50% !important;

}

.text-over-video {
    text-align: center;
}

我嘗試弄亂絕對和相對定位以及浮動，我認為要輸入文本，我需要添加表格元素嗎？

我通過以下標題圖片的幫助實現了這一目標： http : //ideedev.co.uk/newseed/design/但我一生都無法將其與視頻配合使用... <<-獨特的部分，我已經使用圖像實現了，但是我不能對視頻使用相同的方法。 如果某人遇到相同的問題，這將有所幫助。

Answer 1

您想使用絕對定位，並且可以使用top: 50%; left: 50%; transform: translate(-50%,-50%); top: 50%; left: 50%; transform: translate(-50%,-50%); 居中。

 .homepage-video, .homepage-video video { position: relative; } .homepage-video video { background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% !important; } .text-over-video { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; } 

 <div class="homepage-video"> <video autoplay loop muted> <source src="https://player.vimeo.com/external/208845912.hd.mp4?s=2c04fe329c04029926a99943f076c84c6b86bb46&profile_id=119" type="video/mp4"> </video> <div class="text-over-video"> <h1>HEADING TEXT GOES HERE</h1> </div> </div>