Html CSS图像定心

我有一个小的块和图像宽度大于块。我想让块中心等于图像中心

---

图像中心和块中心必须在一条垂直线上。我只想看到图像的中心部分。

您可以使用

变换属性，而不是在图像上使用负边距

.img-container{
  width:100px;
  overflow:hidden;
}
.img-container img{
  transform: translateX(-50%);
}

你可以这样做

html

我可以想出两种方法：

您可以在
上使用背景css属性，背景位置设置为中心，背景大小设置为覆盖，而不是
标记；在你的情况下，会是这样的：

.img容器{


宽度：100px；


高度：500px；


background:没有重复的中心/封面url（“路径到您的图像”）


}

必须设置高度属性

如果您想坚持使用
标记，它将如下所示：

.img容器{


宽度：100px；


高度：500px；


溢出：隐藏；


位置：相对；


}

.img容器img{


位置：绝对；


右侧：-1000%；


左：-1000%；


top:-1000%；


底部：-1000%；


页边距：自动；


}

图像右、左、上、下位置的疯狂数字是因为父块的小尺寸
和图像本身的大尺寸-百分比基于父块的宽度和高度，因此在这种情况下
右：100%
将是100px，这就是为什么在较小的父块中定位更大的图像时需要更大的数字

当然，可以调整值，只要它们相等，图像就会居中

在这两种情况下，必须设置高度，否则将无法工作
-这是我的尝试这不是问题，你希望我们如何处理？请编辑您的问题并提供一些代码示例。您能提供您的代码吗？。预期的输出图像裁剪是什么，例如CSS，您可以看到。谢谢！很好地解决了我的任务）
<div class="img-container">
    </div>

enter code here
.img-container{
 max-width: 100px;
 min-height: 580px;
 background-repeat: no-repeat;
 background-position: center;
 background-image: url(http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701);
}