Вступление

Люблю решать интересные задачи по верстке, а с учетом моего опыта в этой сфере, чуть больше 5 лет, такие задачи попадаются не часто.
Недавно столкнулся сразу с несколькими такими задачами:

1. Центрирование изображения по центру страницы с сжатием его при ресайзе браузера.

2. Абсолютное центрирование изображение вне зависимости от размера окна браузера.

В принципе и первая и вторая задача решаема с помощью маленького javascript но мне хотелось сделать это по уму через html+css.
Еще задача облегчалась тем, что сайт, на котором это будет использоваться, разрабатывался современным, и поддержка ограничивалась ie9+, FF, Chrome, Safary, Opera.


А теперь приступил непосредственно к решению задач.

1. Центрирование изображения по центру страницы с сжатием его при ресайзе браузера

За основу метода я использовал хак с центрированием блока через псевдоелемент, inline-block структуру и vertical-align:

<div class="wrapper">
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>

.wrapper{
   height: 200px; 
}
.item{
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
}
.item:after{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

Способ вроде старый, думаю описывать как, что и зачем тут работает не нужно. Если мне не изменяет память я даже видел на хабре что то подобное, только с использованием лишнего блока, роль которого в моём примере исполняет :arter.

Немного преобразовав этот способ у меня вышло такое:

<div class="wrapper">
    <div class="item">
        <img src="image" alt="">
    </div>
</div>

.wrapper{
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: 0;
    line-height: 0;
}
.item{
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
}
.item:after{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
img{
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

Как можно видеть из примера, внешний блок, .wrapper, я растянул на весь экран. Блок .item стили не изменил. И добавились только стили для нашего изображения, которые выравнивают картинку по вертикальному центру и следят что бы картинка не была больше родительского блока и по высоте и по ширине.
В итоге у нас красивый и аккуратный код, быстрая работа браузера в выравненные картинки.

Пример
Пример с кодом

2. Абсолютное центрирование изображение вне зависимости от размера окна браузера.

А вот с этим пришлось повозиться. Изначальная идея была такая:

<div class="wrapper">
    <div class="item">
        <img src="image" alt="">
    </div>
</div>

.wrapper{
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.item{
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
}
.item img{
    margin: -50% 0 0 -50%;
}

Идея строилась та такой логике:

• Внешний блок, .wrapper, растянутый на всю свободную ширину и высоту.
• Внутренний блок, .item, принимает ширину и высоту у картинки, которая расположена внутри, так как он inline-block; и выставляется верхним левым углом в центр родительского блока.
• Вынос картинки в минусовой margin, который как раз должен был её выровнять точно по центру .wrapper

Но вполне логичную идею ворвалась еще более логичная зависимость. 50% отступ высчитывается на основании половины высоты или ширины родителя. В моём случае ширина и высота родителя строились на ширине и высоте картинке, а после того как картинка сдвигалась в -50% то и родитель, .item, уменьшался на эти же 50% и круг замыкался.

Решил я это вспомнив об transform, а точней об его функции translate, которая как бы сдвигает отображение объекта, но оставляет место где он был. И получилось что заменив margin картинки на transform: translate(-50%, -50%); задача сразу решается. И вот что вышло в конце:

<div class="wrapper">
    <div class="item">
        <img src="image" alt="">
    </div>
</div>

*{
    padding: 0;
    margin: 0;
    vertical-align: top;
}
html,
body{
    width: 100%;
    height: 100%;
}
.wrapper{
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.item{
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
}
.item img{
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Пример
Пример с кодом

ЗЫ: Я не уверен единственные ли это варианты или нет. Думаю не всем эти варианты подойдут.
Но я точно знаю, что если они подошли в моём случае, то найдутся люди которых они возможно очень выручат в ихних задачах. К тому же если чуть чуть дополнить код можно добавить костыли и для более старых IE, я не добавлял так как не хотел ради очень устаревших браузеров портить чистый код.
ЗЫ2: Критика и советы очень приветствуются. Спасибо что дочитали до конца.