html - 调整屏幕大小时问题居中 Logo

Question

我正在这个网站上工作 https://pure-cove-85477.herokuapp.com/ 如您所见，它中间有一个 Logo ，当您调整屏幕大小时，它会更改其大小和位置。我曾尝试使用媒体查询将其居中，随着屏幕尺寸的变化将其定位不同，但是，在每台设备上都无法正确居中，特别是如果您在横向模式的移动设备上使用它， Logo 会从英雄图像中突出来.

我使用 https://www.responsinator.com/检查那个问题。

我的问题是，是否有一个简单的 DRY 解决方案？

我尝试使用 bootstrap 列，但它更困惑，媒体查询是目前我能想到的最佳解决方案，但它不能解决横向 View 。

#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%;
    }
}

Answer 1

你能试试这个吗。

#hero img {
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
}

<div id="hero">
  <img src="https://res.cloudinary.com/gnprojects/image/upload/v1546601197/Website%20images/logo_la_tiendita_del_pan.png" />
</div>