CSS图像居中

Question

我有一个小块，图像宽度大于该块。 我要遮挡中心等于图像中心。

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

Answer 1

您可以使用transform属性，而不是在图像上使用负边距

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

https://jsfiddle.net/7gk07eLm/2/

Answer 2

你可以这样

html

<div class="img-container">
    </div>

CSS：

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

Answer 3

我可以想到两种方法：

1. 除了<img>标记，还可以在<div>上使用background css属性，将background-position设置为center，将background-size设置为cover。 在您的情况下，将是这样的：

   .img-container {
width: 100px;
height: 500px;
background: no-repeat center /cover url("path_to_your_image");
}

必须设置Height属性！

2. 如果您想使用<img>标签，它将看起来像这样：

   .img-container {
width: 100px;
height: 500px;
overflow: hidden;
position: relative;
}

   .img-container img {
position: absolute;
right: -1000%;
left: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
   }

图像的左右，左，上和下位置的疯狂数字是由于父<div>尺寸小和图像本身的尺寸大-该百分比基于父块的宽度和高度，因此在这种情况下为right: 100%; 将为100px，这就是为什么您需要更大的数字才能在较小的父块中放置较大的图像。

当然，只要值相等即可调整值，图像将居中。

在这两种情况下，都必须设置高度，否则将不起作用！