CSS“裁剪”图像，但垂直居中对齐

Question

我目前正在使用 CSS 裁剪图像，如下所示：

<div class="crop">
    <img src="image.png" alt="">
</div>

.crop {
width: 150px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 150px;
height: auto;
margin: 0 0 0 0;
}

这样，它会水平对齐容器内的图像。但是，我不知道如何在中心垂直对齐图像（所以它就在中间）。有什么帮助吗？

Answer 1

/* 把这个放在这里.. */

.crop {
    position: relative;
    overflow: hidden;
    height: 180px;
    margin: 8px;
}
.crop img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}