Html 在缩放浏览器/使用移动设备时，如何使图像居中而不偏移？

因此，我一直在努力使我的网站上的徽标居中，并在手机上查看或更改浏览器大小时保持在中心位置，但无论我做什么，浏览器越小，它将越来越偏离中心位置

这是我的密码：

    img#logo{
    top:20px; 
    width:570px; 
    height:125px;
    position: absolute;
    left:39%;
    }

img#标志{
顶部：20px；
宽度：570px；
高度：125px；
位置：绝对位置；
左：0；
右：0；
保证金：0自动；
}

用块元素环绕图像，并使用文本对齐：居中

div{
宽度：100%；
文本对齐：居中；
}
img#标志{
宽度：570px；
高度：125px；
}

试试这个：

img#logo{
    top:20px; 
    width:570px; 
    height:125px;
    position: absolute;
    left:50%;
    margin-left: -260px;
}

---

可以使用“位置：绝对”和“变换”属性使图像居中。 图像将使用所有屏幕和所有分辨率进行重新调整

img#标志{
位置：绝对位置；
宽度：570px；
高度：125px；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

水平居中

使用下面的css

img#logo {
  top: 20px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 570px;
  height: 125px;
}

img#标志{
顶部：20px；
位置：绝对位置；
左：0；
右：0；
保证金：0自动；
宽度：570px；
高度：125px；
}

---

图像是否必须具有

位置：绝对？您需要发布一个显示问题的标记的最小示例：是水平居中还是垂直居中，还是两者兼而有之？