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