如何在div中水平和垂直居中图像

Question

如何在div中将图像水平和垂直居中

HTML：

    <div class="main-item">
      <div class="main-item--content">
        <img src="imgs/item-1.png" alt="item-1" class="main-item--img" />
      </div>
    </div>

CSS：

.main-item {
  height: 95vh;
  margin-top: 6rem;
  background-color: $color-grey-light;
}

我现在所拥有的：

我想要的结果：

我希望结果能够响应，以便无论设备屏幕的宽度是多少，图像都保持居中。 最重要的是我希望图像具有响应性。