Абсолютное центрирование отзывчивого изображения на CSS

Для абсолютного горизонтального и вертикального центрирования элементов на странице предлагаются различные методы, например, на Хабре, ещё в 2013г был представлен перевод отличной статьи с решением от Стефана Шоу, написанной в своё время для Smashing Magazine.
Так что, в этом плане, ничего нового не открою, с центрированием элементов всё предельно ясно.

Однажды, при разработке очередного лайтбокса, мне понадобилось сделать так чтобы просматриваемые изображения, не только выводились абсолютно по центру, но и были гарантированно отзывчивыми, т.е. гибкими и корректно отображающимися при просмотре на экранах различных пользовательских устройств, вне зависимости от размеров оригинальной картинки.
 

 
Для центрирования решение нашёл быстро, использовал flexboxдля контейнера лайтбокса и один из самых простых способов трансформации transform: translate(-50%, -50%); непосредственно для изображения.

Способ конечно не идеальный, требующий дополнительной разметки. Фишка в том, что изображение с установленными максимально возможными значениями высоты и ширины max-width и
max-height в 100%, размещаем в div с нулевыми значениями высоты и ширины, который в свою очередь уже помещаем в контейнер лайтбокса с высотой и широтой 100%.

В заключении, стоит подробнее остановиться на преимуществах и недостатках данного метода. Что касаемо цнтрирования, при использовании flexbox контент может быть любой высоты или ширины, это несомненно плюс, однако напрочь отсутствует поддержка в IE 8-9 и требует разнообразные префиксы для корректной работы в современных браузерах.
Используя transform, в плюсе мы получаем минимальный код и изменяемую высоту, недостатки те же: не работает в IE 8, использование префиксов и может мешать работе других эффектов с transform.
Для реализации конкретно этой задачи, указанные недостатки, если вы не особо озабочены, что в результате увидят пользователи упорно сидящие на IE-шке старых версий, не должны вас волновать, на выхлопе мы получаем вполне себе рабочее решение.
Ну, а как реализовать отзывчивые изображения, корректно отображаемые во всех браузерах, мы рассматривали ранее на наглядных примерах.
Так что из всего вышеизложенного напрашивается простой вывод, что под определённые задачи выбираем определённое решение. Если кому известна универсальная метода, просветите, а пока смотрим демо и ковыряем код, при просмотре изменяйте размеры окна браузера:

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях: