调整屏幕大小时将徽标居中放置问题

Question

我正在此网站https://pure-cove-85477.herokuapp.com/上工作 如您所见，它的中间有一个徽标，当您调整屏幕大小时，它会更改其大小和位置。我尝试使用媒体查询将其居中，但随着屏幕尺寸的变化将其放置在不同的位置，但是，并不是在所有设备中都将其正确居中，尤其是如果您在具有横向模式的手机上使用它时，徽标会从英雄图像中突出显示

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

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

我尝试使用引导程序列，但比较麻烦，到目前为止，媒体查询是我能想到的最佳解决方案，但它不能解决横向视图。

#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>

Answer 2

您可以尝试使用display flex：

#hero{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
img{
    max-width: 40%;
}