响应式图片div问题中的居中div

Question

我正在尝试使用Flexbox将div居中。

这是我的标记：

<header class="container">
  <div class="bg-image">
    <div class="logo">
      <h1>hello</h1>
    </div>
  </div>
  <!-- .masthead-->
</header>

我已经使用宽高比方法使bg类中的背景图像响应background-size: contain，所使用的图像的高度为600px，宽度为800px，给我75％的投影效果我用作填充顶部。

但是，当我尝试使用Flexbox将h1放置在徽标类的中心时，使用此方法来获得响应的背景图像是行不通的。

这是我的CSS：

.container{
  display:flex;
  height: 100vh;
  justify-content: center;
  align-items: center;


    //padding-top: 75%;
    background: url("https://i.pinimg.com/originals/92/4d/31/924d316f8791c2c7f167ad189950d172.jpg")
      no-repeat center;
    background-size: contain;
}

禁用填充顶部会使徽标类居中，但不能获得我想要的响应式图像，因为它会根据屏幕空间在侧面或顶部和底部创造空间。

有没有一种方法，我可以像不像background-size: cover;那样裁剪出响应图像，我仍然想使用background-size: contain;并将div在bg图像内水平和垂直居中类。我计划在徽标类中添加一个svg徽标，我希望将其放在bg-image类中。

感谢所有输入。