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

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

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

HTML:

<div>
 <img src=”” alt=””>
</div>
<div>
 <img src=”” alt=””>
</div>

CSS:

div {
    position: relative;
    width: 100%;
    height: 180px;
    vertical-align: middle;
}
div img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

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

Результат: