Центрирование изображений на странице

Вступление

Люблю решать интересные задачи по верстке, а с учетом моего опыта в этой сфере, чуть больше 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: Критика и советы очень приветствуются. Спасибо что дочитали до конца.