javascript - 在 div 中居中图像，如设置背景位置

Question

有什么方法可以在 div 内完美居中设置标签，而不管该 div 的宽度和高度是多少？换句话说，我想在 div 标签内设置一个图像位置，如中心背景。例如:

.image-wrap {
  width: 50vw;
  height: 720px;
  background: url('some-images.jpg') no-repeat center center / auto 100%;
}

我想在 div 中设置一个图像，就像上面的背景一样，自动宽度和 100% 高度，这样图像中的所有重要内容都将位于 div 的中心。

<div class="image-wrap">
  <img src="some-images.jpg" alt="some image here"/>
</div>

非常感谢!

Answer 1

您可以使用 flex 属性轻松地将其居中。演示 here

.image-wrap {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;

  border: dotted 1px #CCC;
}

<div class="image-wrap">
  <img src="http://lorempixel.com/400/200" alt="some image here"/>
</div>