设置HTML页面固定分辨率时overlay图片居中显示异常问题求助

现有代码的核心问题 #

• style属性中padding-bottom: 350没有添加长度单位（如px），属于无效CSS规则，浏览器会直接忽略该配置
• 额外添加的padding-right: 200px属性，会在图片左侧生成200px的内边距，直接把图片整体向右侧推动，是图片位置偏右的主要原因
• <center>标签仅能实现水平方向居中，无法处理垂直方向的位置调整，所以垂直位置不符合预期
• 没有配置层级相关属性，无法保证图片显示在顶层

修正后代码（全部使用内联样式，无需额外CSS文件/样式块，符合你的需求） #

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body style="margin: 0;padding: 0;">
  <img src="https://s10.gifyu.com/images/once-30-sec-5-min-99.gif" alt="Computer man" style="width:400px;height:100px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 9999;">
<script>
</script>
</body>
</html>

代码说明 #

• 给body设置margin:0;padding:0清除默认边距，避免多余偏移
• 给图片设置position: fixed让其相对于整个视口定位，top:50%;left:50%把图片左上角定位到屏幕中心，再用transform: translate(-50%, -50%)把图片自身中心和屏幕中心对齐，实现完美的水平+垂直居中
• z-index:9999设置足够高的层级，保证图片显示在所有内容的顶层

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