如何使用css在div中显示图像的中间？

Question

如何使用css在div中显示图像的中间？

https://jsfiddle.net/yn7hubkd/

CSS:

.out{
    width: 500px;
    height: 500px;
    overflow: hidden;
}

HTML:

<div class="out">
  <img src="https://redditupvoted.files.wordpress.com/2016/03/waffles-cat.jpg">
</div>

我得到了这个输出:http://i.imgur.com/gYzP1xo.png

但是我希望得到这样的结果(以x方向为中心,黑色方块为图像,红色方块为div类):http://i.imgur.com/9QGVYtN.png

输出结果为:http://i.imgur.com/EqzM7QO.png

Answer 1

通过将图像用作背景,可以简单地实现此行为.只需设置background-size: cover;并background-position: center;用图像填充容器并将其放在中心:

.out {
  width: 500px;
  height: 500px;
  overflow: hidden;
  background-image: url(https://redditupvoted.files.wordpress.com/2016/03/waffles-cat.jpg);
  background-size: cover;
  background-position: center;
}

<div class="out"></div>

如果您被迫使用<img />标签,只需添加50%的负左边距:

.out {
  width: 500px;
  height: 500px;
  overflow: hidden;
}
.out img {
  margin-left: -50%;
}

<div class="out">
  <img src="https://redditupvoted.files.wordpress.com/2016/03/waffles-cat.jpg">
</div>

Answer 2

您可以使用以下CSS规则将其居中：

.out img {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

https://jsfiddle.net/456jLdfx/1/

这会将其放置在容器宽度的50％处，然后将其向左移动其自身宽度的50％，从而将其水平居中。

补充说明：与相比，它适用于任何图像宽度，margin-left: -50%;仅在这种情况下有效，因为图像的宽度恰好是容器的两倍：500px容器，100px图像）