如何在HTML中使图片居中覆盖于视频上方？现有代码求助

你的代码无法实现居中的核心问题有两个：一是给#img设置了固定的left:30%，无法适配不同屏幕宽度实现真正水平居中；二是top:50%仅让元素顶部对齐垂直中点，没有调整元素自身的偏移。另外#img的固定宽度会限制内部图片的显示范围，导致布局错乱。

以下是修正后的代码：

修正后的CSS #

@charset "UTF-8";
/* CSS Document */
*{
    border:0;
    padding:0;
    margin:0;
}

#contain{
    position:relative;
    width: 100%;
    height: 100vh; /* 和视频高度保持一致，确保容器覆盖视口 */
}

video {
 height: 100vh;
 width: 100%;
 object-fit: cover;
 position: absolute;
}

#img {
    left: 50%;
    top: 50%;
    position:absolute;
    z-index:300000;
    transform: translate(-50%, -50%); /* 通过偏移自身宽高的50%实现完美居中 */
    text-align:center;
}

body {
    background-color: #111111;
}

修正后的HTML #

<body>
<div id="contain">
<div id="img"><a style="color:white; font-family:verdana;" title="Home"><img src="purefilmsw.png" alt="Pure Films" width="912.5" height="58.5"></a></div>
<div id= "vid"><video id="background-video" autoplay loop muted>
<source src="vid.mp4" type="video/mp4">
</video></div>
</div>
</body>

关键修改说明 #

• 给#contain添加width:100%; height:100vh，确保相对定位的容器覆盖整个视口范围，作为绝对定位元素的参考
• 将#img的left改为50%，配合transform: translate(-50%, -50%)，让元素自身的中心点对齐容器的中心点，实现水平+垂直双居中
• 移除#img的width:160px和min-height:40px，避免限制内部图片的正常显示

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