html - 如何在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;
}

我现在拥有的：

我想要的结果：

我希望结果是响应式的，这样无论设备屏幕的宽度是多少，图像都会保持在中心。最重要的是我希望图像具有响应性。

标签： htmlcsssass