Question

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

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;即可为容器填充图片并将其放置在中心位置：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如果您被迫使用<img />标记，只需添加50％的负左边距：

＆＃13;

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

＆＃13;

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

＆＃13;

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

wait

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

Answer 4

只需在CSS中添加此内容

请在下面找到您更新的小提琴。

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

Your Updated Fiddle

Expalnation：margin:0 auto;将块级别元素边距顶部和底部调整为0，左右自动调整（即它将相对于父级自动计算。）

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

4 个答案: