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

Question

I have an image inside a div. I crop the image by having a fixed height on the div and overflow: hidden . How do I align the image inside to the middle vertically ?

So, to visualize my aim:

1. Full image of cat.

2. How it is currently looking when the image is cropped.

3. How I want it to look. The image is aligned to the middle vertically and cropped accordingly.

Please note that the height of the image varies (user uploaded).

jsFiddle for testing.

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

Here is an alternate way:

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

JSFiddle

Answer 2

Flexbox can do that:

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

or absolute positioning.

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

Or...of course, using a background image instead.

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