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