将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>