HTML/CSS视频背景设置问题：居中文本偏移至底部

问题根源 #

1. 选择器不匹配：HTML中hero容器使用id="hero"，但CSS里定义的是.hero类选择器，导致用于居中的flex布局样式完全没有作用到容器上，这是文本偏移的核心原因。
2. 视频元素未绑定样式：video标签缺少back-video类，无法应用预设的绝对定位和层级样式，会干扰容器的布局流。
3. 渐变背景语法错误：linear-gradient(rgba(12,3,51,0.3))参数不完整，线性渐变至少需要两个颜色节点，当前写法无法生成半透明遮罩。

修改后的完整代码 #

CSS代码

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: TESLA Regular;
}
.hero{
    width: 100%;
    height: 100vh;
    /* 修正渐变语法，添加第二个颜色节点 */
    background-image: linear-gradient(rgba(12,3,51,0.3), rgba(12,3,51,0.3));
    position: relative;
    padding: 0 5%; 
    display: flex;
    align-items: center;
    justify-content: center;
}
nav{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
nav .logo{
    width: 150px;
}
nav ul li{
    list-style: none;
    display: inline-block;
    margin-left: 40px;
}
nav ul li a{
    text-decoration: none;
    color: #fff;
}
.content{
    text-align: center; 
}
.content h1{
    font-size: 160px;
    color: rgb(110, 57, 57);
    font-weight: 600;
    transition: 0.5s;
}
.content h1{
    -webkit-text-stroke:2px rgb(212, 28, 28) ;
    color: transparent;
}
.back-video{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}
@media (min-aspect-ratio: 16/9){
    .back-video{
        width: 100%;
        height: auto;
    }
}
@media (max-aspect-ratio: 16/9) {
    .back-video {
        width: auto;
        height: 100%;
    }
}

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 将id改为class，匹配CSS选择器 -->
    <div class="hero">
        <!-- 给video添加back-video类，应用背景定位样式 -->
        <video autoplay loop muted plays-inline class="back-video">
            <source src="mylive.mp4" type="video/mp4">
        </video>
        <nav>
            <img src="2086940.jpg" class="logo" alt="">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Zone</a></li>
                <li><a href="#">Gaming</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">About us</a></li>
            </ul>
        </nav>
        <div class="content">
            <h1>Gaming is not a crime!</h1>
        </div>
    </div> <!-- 补充闭合标签 -->
</body>
</html>

额外说明 #

修改后，hero容器的flex布局会正确生效，将内容垂直水平居中；视频元素会作为背景层固定在容器底部，不会干扰正常布局流；渐变遮罩也能正常显示，增强文本可读性。

内容的提问来源于stack exchange，提问作者Umar_Khan