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

Question

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 class输出）：http://i.imgur.com/9QGVYtN.png

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

Answer 1

只需将图像用作背景即可实现此行为。只需设置 background-size: cover; and 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 图片）

Answer 3

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

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

Answer 4

只需将此添加到您的 CSS

请在下面找到您更新后的 Fiddle。

.out img{
  margin: 0 auto;
  max-width: 90%;
  display: block;
}

Your Updated Fiddle

说明：margin:0 auto; 将块级元素的上下边距调整为 0 和左右自动（即它会相对于父级自动计算。）

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

How to show middle of image in div using css?

html

css

position

image

css-position