Html 调整屏幕大小时，徽标居中出现问题

我在这个网站上工作 正如你所看到的，中间有一个标志，当你调整屏幕尺寸时，它会改变它的大小和位置。我曾尝试使用媒体查询将其居中，随着屏幕大小的变化，对其进行不同的定位，但是，并非每个设备都能正确居中，特别是如果您在移动设备上以横向模式使用它，则徽标将突出英雄图像

我过去经常检查那个问题

我的问题是，有没有一个简单的干法解决方案

我试着使用引导列，但它更混乱，媒体查询是迄今为止我所能想到的最好的解决方案，但它不能解决横向视图

#hero img {
    transform: scaleX(-1);
    width: 50%;
    position: absolute;
    top: 25%;
    right: 25%;
}

@media (min-width: 576px) {
    #hero img {
        transform: scaleX(-1);
        max-width: 40%;
        position: absolute;
        top: 25%;
        right: 30%;
    }
}
@media (min-width: 768px) {
    #hero img {
        transform: scaleX(-1);
        max-width: 30%;
        position: absolute;
        top: 23%;
        right: 35%;
    }
}
@media (min-width: 992px) {
    #hero img {
        transform: scaleX(-1);
        max-width: 20%;
        position: absolute;
        top: 30%;
        right: 40%;
    }
}
@media (min-width: 1200px) {
    #hero img {
        transform: scaleX(-1);
        max-width: 20%;
        position: absolute;
        top: 30%;
        right: 40%;
    }
}

---

您可以尝试使用display flex：

英雄{ 宽度：100%； 高度：100vh； 显示器：flex； 对齐项目：居中； 证明内容：中心； } img{ 最大宽度：40%； }

---

你能试试这个吗

英雄img{ 转化：转化-50%，-50%； 位置：绝对位置； 最高：50%； 左：50%； 宽度：100px； }

---

你是不是把绝对、顶部、右侧等都复杂化了。？只需使用传统解决方案“自动”进行左右边距；可能以较小的分辨率调出或缩小图像的大小。可能整个事情都是一个被覆盖的背景图像。太好了！这正是我想要的，非常感谢！