如何在HTML中实现视频上方的居中叠加文字？

直接给你最易懂的实现代码，照着改就能用：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 包裹视频和文字的容器，必须设为相对定位 */
        .video-wrap {
            position: relative;
            width: 700px; /* 可以改成你需要的视频宽度 */
            margin: 20px auto; /* 让容器在页面居中（可选） */
        }

        /* 视频默认占满容器宽度 */
        .video-wrap video {
            width: 100%;
            display: block;
        }

        /* 叠加的文字样式 */
        .center-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            /* 核心居中技巧：把文字往上往左挪自身一半的距离 */
            transform: translate(-50%, -50%);
            z-index: 1; /* 强制让文字在视频上方 */
            color: #fff; /* 白色文字，适配大多数视频背景 */
            font-size: 28px;
            font-weight: bold;
            text-shadow: 0 0 6px #000; /* 加阴影避免文字和视频背景融合 */
        }
    </style>
</head>
<body>
    <div class="video-wrap">
        <video controls>
            <source src="你的视频地址.mp4" type="video/mp4">
            你的浏览器不支持视频播放
        </video>
        <div class="center-overlay">这里放你要显示的文字</div>
    </div>
</body>
</html>

关键要点说明 #

• 必须给包裹视频和文字的容器加position: relative，不然文字会跑到页面角落，而不是视频上方。
• transform: translate(-50%, -50%)是目前最稳定的居中方法，不管文字多长都能精准居中。
• z-index: 1一定要加，不然视频会把文字盖住，这也是很多新手踩坑的点。
• 如果你之前写的