将div中的图像垂直对齐到中间

Question

我在div内有一张图片。 我通过在div上固定高度来裁剪图像并overflow: hidden 。 如何将内部的图像垂直对齐到中间？

因此，将我的目标形象化：

1. 猫的完整图像。

2. 裁剪图像时当前的外观。

3. 我希望它看起来如何。 图像在垂直方向上与中间对齐，并进行相应的裁剪。

请注意，图像的高度会有所不同（用户上传）。

jsFiddle进行测试。

HTML：

<div class="container">
    <img src="http://i.imgur.com/qRkEJni.jpg">
</div>

CSS：

.container {
    height:200px;
    width:200px;
    float:left;
    overflow: hidden;
}

.container img{
    height:auto;
}

Answer 1

这是另一种方法：

.container img {
    height: auto;
    top: 50%;
    position: relative;
    transform: translate(0,-50%);
}

JSFiddle

Answer 2

Flexbox可以做到这一点：

 .container { height:200px; width:200px; float:left; overflow: hidden; border:1px solid black; display: flex; flex-direction: column; justify-content: center; } .container img{ height:auto; display: block; } 

 <div class="container"> <img src="http://i.imgur.com/qRkEJni.jpg"> </div> 

或绝对定位。

 .container { height: 200px; width: 200px; float: left; overflow: hidden; border: 1px solid black; position: relative; } .container img { height: auto; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } 

 <div class="container"> <img src="http://i.imgur.com/qRkEJni.jpg"> </div> 

或者...当然，可以使用背景图片代替。

 .container { height: 200px; width: 200px; float: left; overflow: hidden; border: 1px solid black; position: relative; background-image: url(http://i.imgur.com/qRkEJni.jpg); background-position: center center; } 

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