Центрирование картинки

Один из оптимальных методов центрирования изображения в контейнере. Как вертикально так и горизонтально.

А теперь детальнее. К примеру, у нас есть контейнер в котором необходимо центрировать изображение по вертикали и горизонтали

HTML:


<div class="img-container">
<img src="http://www.cuded.com/wp-content/uploads/2012/12/Julian_6600_675.jpg" alt="">
</div>
<div class="img-container">
<img src="https://s-media-cache-ak0.pinimg.com/236x/0d/7e/3b/0d7e3b42868ea9a36bcabea775dea2d0.jpg" alt="">
</div>
<div class="img-container">
<img src="http://data.whicdn.com/images/46070308/original.jpg" alt="">
</div>

CSS:

.img-container {
outline: 1px solid #cdcdcd;
position: relative;
width: 200px;
height: 200px;
float: left;
margin:5px;
background:#afa;
img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
}

Для наглядности закрасил контейнер

Результат:

Like what you read? Give Victor.V.P. a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.