Выравнивание по центру в CSS

Выравнивание элементов по центру в CSS — это одна из самых популярных причин чтобы пожаловаться на CSS. «Почему всё так сложно?» — возмущаются они. Мне кажется, что проблема заключается не в том что это трудно сделать, а в том что способов для выравнивания элементов по центру очень много и бывает достаточно сложно выбрать из них подходящий.

Давайте выстроим все возможные решения в виде древовидной схемы и будем надеяться, что это упростит нашу задачу.

Итак, мне нужно выравнять элемент по центру.

Горизонтальное выравнивание

Выравнивание по центру строкового или строково-* элемента

Выравнивать по центру строковые элементы внутри блочного родительского элемента можно достаточно просто:

.center-children

Это будет работать для inline , inline-block , inline-table , inline-flex , и т. д.

Выравнивание по центру блочного элемента

Выравнять по центру блочный элемент вы можете установив свойствам margin-left и margin-right значение auto (у него также должна быть задана ширина, иначе элемент просто займёт всю ширину контента и не будет необходимости в выравнивании). Чаще всего это делается с помощью сокращённого свойства, вот так:

.center-me

Это будет работать независимо от того какая ширина установленная у блочного элемента или его родителя.

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

Выравнивание по центру нескольких блочных элементов

Если есть два или более блочных элементов, которые вам нужно выравнять горизонтально по центру в пределах одной строки, то возможно вам лучше изменить их тип отображения. Ниже приведён пример изменения их типа отображения на inline-block и пример с Flexbox:

Если эти несколько блоков расположены на разных строках, то техника с автоматическими отступами по прежнему прекрасна:

Вертикальное выравнивание

Вертикальное выравнивание по центру в CSS немного сложнее.

Выравнивание по центру строкового или строково-* элемента

Выравнивание элемента с одной строкой

Иногда строковые/текстовые элементы могут выравниваться по центру просто потому что у них одинаковое значения для свойств padding-top и padding-bottom .

.link

Если для вас по каким-то причинам padding — это не вариант, а вы пытаетесь выровнять по центру некоторый текст и точно знаете, что он не будет обёрнут чем-то ещё, то есть есть небольшой трюк, суть которого заключается в том чтобы установить свойство line-height равным значению высоты элемента.

.center-text-trick

Выравнивание многострочного элемента

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

Если это что-то похожее на таблицу, возможно вы сможете использовать Flexbox ? Отдельный Flex-элемент может быть легко расположен по центру внутри Flex-контейнера.

.flex-center-vertically

Помните, что это на самом деле актуально когда у контейнера есть фиксированная высота ( px , % , и другие), вот почему здесь у контейнера задана высота.

Если обе техники приведённые выше нельзя применить, вы можете использовать технику «призрачного элемента», в которой псевдоэлемент с высотой в 100% размещается внутри контейнера и тех выравнивается вертикально по центру него.

.ghost-center < position: relative; >.ghost-center::before < content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle; >.ghost-center p

Выравнивание по центру блочного элемента

Выравнивание элемента с известной высотой

Довольно часто мы не можем знать высоту, по многим причинам: если изменяется ширина, текст может форматироваться и изменять высоту. Разная стилизация текста может изменять высоту. Разный размер шрифта может изменить высоту. Элементы с фиксированным соотношением сторон, такие как изображения, могут изменять высоту при изменении собственных размеров и т.д.

Но если вы знаете высоту элемента, то можете выравнивать по центру вот так:

.parent < position: relative; >.child < position: absolute; top: 50%; height: 100px; margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */ >

Выравнивание элемента с неизвестной высотой

Даже если вы не знаете высоту элемента, его всё ещё можно протолкнуть на 50% высоты его родителя, а после поднять на 50% его собственной высоты:

.parent < position: relative; >.child

Выравнивание элемента с помощью Flexbox

Небольшой сюрприз, это можно очень просто сделать с помощью Flexbox.

.parent

Горизонтальное и вертикальное выравнивание

Вы можете комбинировать представленные выше техники для того чтобы получить идеально выравненные по центру элементы. Но обычно их можно разделить на 4 группы:

Выравнивание элемента с фиксированной шириной и высотой

Использование отрицательных отступов ( maring ) равных половине этой ширины и высоты после абсолютного позиционирования элемента 50% / 50% выравняют элемент по центру. У этого способа достаточно хорошая кроссбраузерная поддержка:

.parent < position: relative; >.child

Выравнивание элемента с неизвестной шириной и высотой

Если вы не знаете ширину или высоту элемента, то можете использовать свойство transform и отрицательный translate в 50% в обоих направлениях (в зависимости от текущей ширины / высоты элемента) до центра:

.parent < position: relative; >.child

Выравнивание элемента с помощью Flexbox

Чтобы выровнять элемент по центру с помощью Flexbox вам нужно использовать два свойства центрирования:

.parent

Выравнивание элемента с помощью CSS Grid

Это просто небольшой трюк (присланный Lance Janssen), который в большей степени будет работать для одного элемента:

body, html < height: 100%; display: grid; >span < /* thing to center */ margin: auto; >

Вывод

Теперь вы можете всё что угодно выравнять по центру в CSS.

Все про CSS-выравнивание: способы и примеры

Веб-разработчику важно не только поставить контент на страницу сайта, но и сделать это красиво. Для этого важно знать, как выровнять блок по центру в CSS. Главная сложность в том, что язык существует с 1996 года, и за это время скопилось много способов выровнять блок по центру. В этой статье рассмотрим основные и самые удобные подходы к тому, как отцентровать блок в CSS.

Освойте профессию «Frontend-разработчик»

Подготовка проекта

Профессия / 9 месяцев
Frontend-разработчик
Создавайте интерфейсы сервисов, которыми пользуются все
2 400 ₽/мес 4 000 ₽/мес

Все примеры выравнивания будем рассматривать на блоках

 
Текстовый блок
 

body < font-family: Tahoma, sans-serif; background-color: rgb(18, 18, 18); >.parent < border: 4px solid rgb(113, 187, 122); border-radius: 10px; margin: 15px; padding: 10px; >.child

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

 
Текстовый блок 1
 
Текстовый блок 2
 

Выравнивание по горизонтали

Для выравнивания по горизонтали в CSS предусмотрено несколько способов. Сперва рассмотрим наиболее простые и перейдем к продвинутым, построенным на модели веб-макета Flexbox.

Автоотступы

Горизонтальное выравнивание в CSS — это расстановка отступов по левому и правому краю блока. В СSS для этого есть свойства margine-left и margine-right . Для них можно устанавливать значения вручную, а можно доверить эту задачу CSS. Для этого выберите автоматическое управление отступами с помощью значения auto и установите ширину блоков с помощью свойства width .

 
Текстовый блок 1
 
Текстовый блок 2
 

.child

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

Inline-блоки

С помощью строчных элементов удобнее всего выполнять именно горизонтальное выравнивание по центру в CSS. Для этого есть готовый метод text-align: center , примените его к родительскому блоку. Чтобы выравнивание корректно сработало, к дочерним блокам добавьте свойство display: inline-block .

 
Текстовый блок 1
 
Текстовый блок 2
 

.parent < text-align: center; >.child

Плюс inline-блоков в том, что их ширина автоматически подстраивается под содержимое. Поэтому ее уже не надо указывать с помощью свойства width . Если применить такой тип центровки в CSS к нескольким блокам, то они будут расположены в строчку, но с разной высотой, если содержимое отличается.

Flexbox

Flexbox — один из самых удобных способов выравнивания практически для любого типа контента и блоков. Для горизонтального выравнивания в Flexbox к родительскому блоку примените свойство display: flex , чтобы блок стал flex-контейнером. Используйте justify-content: center , чтобы выровнять по горизонтали дочерние элементы.

 
Текстовый блок 1
 
Текстовый блок 2
 

.parent

В случае с Flexbox ширина и высота блоков автоматически подстраиваются под содержимое. Если применить такой тип выравнивания по центру к нескольким блокам, то они будут выстраиваться в одну линию.

Выравнивание по вертикали в CSS

В примерах вертикального выравнивания в CSS будем также использовать родительские и дочерние блоки

Свойства position и transform

Этот способ центрирования по вертикали –– один из самых сложных. Придется применять много свойств, и важно ничего не пропустить, иначе блок выравнивается по одной из своих границ, а не по центру. Сначала передайте родительскому блоку свойство position: relative и задайте высоту 100 пикселей с помощью свойства height . После этого к дочернему блоку надо применить свойство position: absolute . Теперь можно выполнить сдвиги блока относительного родительского с помощью свойств top и position .

 
Текстовый блок 1
 

.parent < position: relative; height: 100px; >.child

Flexbox

Для вертикального выравнивания надо сделать родительский блок flex-контейнером с помощью свойства display: flex и указать тип выравнивания с помощью свойства align-items .

 
Текстовый блок 1
 

.parent

Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все

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

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

Свойства position и transform

Свойства position и transform мы уже применяли для выравнивания по вертикали. Для центрирования можно взять свойства для вертикального выравнивания, добавить left: 50% и изменить значение transform на translate (-50%, -50%) .

 
Текстовый блок 1
 

.parent < position: relative; height: 100px; >.child

Если попробовать выровнять таким образом несколько блоков, то они наложатся друг на друга.

 
Текстовый блок 1
 
Текстовый блок 2
 
Текстовый блок 3
 

Flexbox

Для выравнивания по центру с помощью Flexbox необходимо просто объединить вертикальное и горизонтальное выравнивания.

 
Текстовый блок 1
 

.parent

Способ удобен тем, что новые блоки будут располагаться рядом.

 
Текстовый блок 1
 
Текстовый блок 2
 
Текстовый блок 3
 

Grid

Выравнивание с помощью Grid-макета похоже на Flex. Этот способ удобный, потому что не нужно заранее знать размеры блоков и применять к ним много свойств. Сначала сделайте родительский блок grid-контейнером с помощью свойства display: grid . Дочерним элементам установите автоматические отступы через margin: auto .

 
Текстовый блок 1
 

.parent < display: grid; height: 100px; >.child

Если начать добавлять новые дочерние блоки, то они будут располагаться стопкой друг под другом.

 
Текстовый блок 1
 
Текстовый блок 2
 
Текстовый блок 3
 

Выравнивание текста в CSS

• left — по левому краю;
• right — по правому краю;
• center — по центру;
• justify — по ширине.

Рассмотрим на примере четыре вида выравнивания текста, сохранив стили из прошлых примеров.

 
Текстовый блок left
 
Текстовый блок right
 
Текстовый блок center
 
CSS (англ. Cascading Style Sheets «каскадные таблицы стилей») -- формальный язык декорирования и описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (чаще всего HTML или XHTML). Также может применяться к любым XML-документам, например, к SVG или XUL.
 

.left < text-align: left; >.right < text-align: right; >.center < text-align: center; >.justify

Значения left , right и center выравнивают текст согласно своим названиям. При этом выравнивается только текст относительно своего блока. Сами блоки продолжают занимать всю ширину родителя. Значение justify используется редко из-за того, что оно добавляет неравномерные пробелы. Такой способ применяют только для верстки книг или научных работ.

Свойство text-align можно использовать для выравнивания текста, блоков, заголовков, форм и списков. К примеру, можно расположить по центру заголовок.

 
Заголовок
 

.header

Выравнивание изображений

Если изображение обернуто в контейнер, то к нему можно применять обычные свойства выравнивания. Поэтому даже картинку на странице можно выровнять с помощью Flexbox или text-align .

Flexbox

Для того чтобы выровнять изображение с помощью Flexbox, превратите родительский блок в flex-контейнер с помощью свойства display: flex . После этого добавьте к нему свойства центрирования.

.parent

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

.parent

Свойство text-align

К родительскому блоку можно применять свойство text-align и установить ему значение center . Так вы выровняете изображение и все содержимое блока.

.parent

Свойства position и transform

Свойства position и transform также можно применять к изображениям. При этом мы можем выравнивать только изображение, не затрагивая другие элементы в родительском блоке.

.parent < width: 500px; height: 500px; position: relative; >.img

Теперь добавим заголовок и увидим, что он не сместился в центр и остается на своем месте.

 
Заголовок
 

.parent < width: 500px; height: 500px; position: relative; >.img < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); >.header

Итог

В CSS большое разнообразие подходов к выравниванию элементов. Главная сложность — выбрать подходящий под вашу задачу. Решая, какой способ выравнивания в CSS самый удобный, помните:

• Flexbox удобно использовать практически для всех типов выравнивания и для любого контента;
• свойство text-align позволяет выравнивать не только текст, как это может показаться из названия, но и формы, заголовки, списки, блоки и изображения;
• сетку Grid удобно использовать для центрирования элементов внутри родительского блока.

Frontend-разработчик

Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.

Центрирование горизонтальное и вертикальное

В CSS есть всего несколько техник центрирования элементов. Если их знать, то большинство задач решаются просто.

Горизонтальное

text-align

Для центрирования инлайновых элементов – достаточно поставить родителю text-align: center :

 .outer 
Для центрирования блока это уже не подойдёт, свойство просто не подействует. Например:
 .outer < text-align: center; border: 1px solid blue; >.inner 
margin: auto
Блок по горизонтали центрируется margin: auto :
 .outer < border: 1px solid blue; >.inner 
В отличие от width/height , значение auto для margin само не появляется. Обычно margin равно конкретной величине для элемента, например 0 для DIV . Нужно поставить его явно.
Значение margin-left:auto/margin-right:auto заставляет браузер выделять под margin всё доступное сбоку пространство. А если и то и другое auto , то слева и справа будет одинаковый отступ, таким образом элемент окажется в середине. Детали вычислений описаны в разделе спецификации Calculating widths and margins.
Вертикальное
Для горизонтального центрирования всё просто. Вертикальное же изначально не было предусмотрено в спецификации CSS и по сей день вызывает ряд проблем.
Есть три основных решения.
position:absolute + margin
Центрируемый элемент позиционируем абсолютно и опускаем до середины по вертикали при помощи top:50% :
 .outer < position: relative; height: 5em; border: 1px solid blue; >.inner 
Это, конечно, не совсем центр. По центру находится верхняя граница. Нужно ещё приподнять элемент на половину своей высоты.
Высота центрируемого элемента должна быть известна. Родитель может иметь любую высоту.
Если мы знаем, что это ровно одна строка, то её высота равна line-height .
Приподнимем элемент на пол-высоты при помощи margin-top :
 .outer < position: relative; height: 5em; border: 1px solid blue; >.inner 
Почему -0.625em ?
При стандартных настройках браузера высота строки line-height: 1.25 , если поделить на два 1.25em / 2 = 0.625em .
Конечно, высота может быть и другой, главное чтобы мы её знали заранее.
Можно аналогично центрировать и по горизонтали, если известен горизонтальный размер, при помощи left:50% и отрицательного margin-left .
Одна строка: line-height
Вертикально отцентрировать одну строку в элементе с известной высотой height можно, указав эту высоту в свойстве line-height :
 .outer 
Текст 
Это работает, но лишь до тех пор, пока строка одна, а если содержимое вдруг переносится на другую строку, то начинает выглядеть довольно уродливо.
Таблица с vertical-align
У свойства vertical-align, которое управляет вертикальным расположением элемента, есть два режима работы.
В таблицах свойство vertical-align указывает расположение содержимого ячейки.
Его возможные значения:
baseline Значение по умолчанию. middle , top , bottom Располагать содержимое посередине, вверху, внизу ячейки.
Например, ниже есть таблица со всеми 3-мя значениями:
 table < border-collapse: collapse; >td 
 
top
 
middle
 
bottom
 
 
Обратим внимание, что в ячейке с vertical-align: middle содержимое находится по центру. Таким образом, можно обернуть нужный элемент в таблицу размера width:100%;height:100% с одной ячейкой, у которой указать vertical-align:middle , и он будет отцентрирован.
Но мы рассмотрим более красивый способ, который поддерживается во всех современных браузерах, и в IE8+. В них не обязательно делать таблицу, так как доступно значение display:table-cell . Для элемента с таким display используются те же алгоритмы вычисления ширины и центрирования, что и в TD . И, в том числе, работает vertical-align :
 
Кнопка
с любой высотой
и шириной 
Этот способ замечателен тем, что он не требует знания высоты элементов.
Однако у него есть особенность. Вместе с vertical-align родительский блок получает табличный алгоритм вычисления ширины и начинает подстраиваться под содержимое. Это не всегда желательно.
Чтобы его растянуть, нужно указать width явно, например: 300px :
 
Кнопка
с любой высотой
и шириной 
Можно и в процентах, но в примере выше они не сработают, потому что структура таблицы «сломана» – ячейка есть, а собственно таблицы-то нет.
Это можно починить, завернув «псевдоячейку» в элемент с display:table , которому и поставим ширину:
 
 
Кнопка
с любой высотой
и шириной 
 
Если дополнительно нужно горизонтальное центрирование – оно обеспечивается другими средствами, например margin: 0 auto для блочных элементов или text-align:center на родителе – для других.
Центрирование в строке с vertical-align
Для инлайновых элементов ( display:inline/inline-block ), включая картинки, свойство vertical-align центрирует сам инлайн-элемент в окружающем его тексте.
В этом случае набор значений несколько другой:
Это можно использовать и для центрирования, если высота родителя известна, а центрируемого элемента – нет.
Допустим, высота внешнего элемента 120px . Укажем её в свойстве line-height :
  
Работает во всех браузерах и IE8+.
Свойство line-height наследуется, поэтому надо знать «правильную» высоту строки и переопределять её для inner .
Центрирование с vertical-align без таблиц
Если центрирование должно работать для любой высоты родителя и центрируемого элемента, то обычно используют таблицы или display:table-cell с vertical-align .
Если центрируются не-блочные элементы, например inline или inline-block , то vertical-align может решить задачу без всяких таблиц. Правда, понадобится вспомогательный элемент (можно через :before ).
 .before < display: inline-block; height: 100%; vertical-align: middle; >.inner 
 Центрированный
Элемент 

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

Для всех современных браузеров и IE8 можно добавить вспомогательный элемент через :before :
 .outer:before < content: ''; display: inline-block; height: 100%; vertical-align: middle; >.inner < display: inline-block; vertical-align: middle; >/* добавим горизонтальное центрирование */ .outer 
 Центрированный
Элемент 
В пример выше добавлено также горизонтальное центрирование text-align: center . Но вы можете видеть, что на самом деле внутренний элемент не центрирован горизонтально, он немного сдвинут вправо.
Это происходит потому, что центрируется весь текст, а перед inner находится пробел, который занимает место.

Убрать лишний пробел между div и началом inner , будет .
Оставить пробел, но сделать отрицательный margin-left у inner , равный размеру пробела, чтобы inner сместился левее.

 .outer:before < content: ''; display: inline-block; height: 100%; vertical-align: middle; >.inner < display: inline-block; vertical-align: middle; margin-left: -0.35em; >.outer 
 Центрированный
Элемент 
Центрирование с использованием модели flexbox
Данный метод поддерживается всеми современными браузерами.
  
 Центрированный
Элемент 

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


Не поддерживается IE9-, IE10 поддерживает предыдущую версию flexbox.

Итого
Обобщим решения, которые обсуждались в этой статье.
Для горизонтального центрирования:

text-align: center – центрирует инлайн-элементы в блоке.
margin: 0 auto – центрирует блок внутри родителя. У блока должна быть указана ширина.

Для вертикального центрирования одного блока внутри другого:
Если размер центрируемого элемента известен, а родителя – нет
Родителю position:relative , потомку position:absolute; top:50% и margin-top:- . Аналогично можно отцентрировать и по горизонтали.
Если нужно отцентрировать одну строку в блоке, высота которого известна
Поставить блоку line-height: . Нужны конкретные единицы высоты ( px , em …). Значение line-height:100% не будет работать, т.к. проценты берутся не от высоты блока, а от текущей line-height .
Высота родителя известна, а центрируемого элемента – нет.
Поставить line-height родителю во всю его высоту, а потомку поставить display:inline-block .
Высота обоих элементов неизвестна.

Сделать элемент-родитель ячейкой таблицы при помощи display:table-cell (IE8) или реальной таблицы, и поставить ему vertical-align:middle . Отлично работает, но мы имеем дело с таблицей вместо обычного блока.


Решение со вспомогательным элементом outer:before и инлайн-блоками. Вполне универсально и не создаёт таблицу.
Решение с использованием flexbox.

Выравниваем блок по центру страницы
Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах. 
Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам.
Вариант 1. Отрицательный отступ.
Позиционируем блок атрибутами top и left на 50%, и заранее зная высоту и ширину блока, задаём отрицательный margin, который равен половине размера блока. Огромным минусом данного варианта является то, что нужно подсчитывать отрицательные отступы. Так же блок не совсем корректно ведёт себя в окружении скроллбаров — он попросту обрезается так как имеет отрицательные отступы.
.parent < width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; >.block < width: 250px; height: 250px; position: absolute; top: 50%; left: 50%; margin: -125px 0 0 -125px; img < max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; >> 
Вариант 2. Автоматический отступ.
Менее распространённый, но схожий с первым. Для блока задаём ширину и высоту, позиционируем атрибутами top right bottom left на 0, и задаём margin auto. Плюсом данного варианта являются рабочие скроллбары у родителя, если у последнего задана 100% ширина и высота. Минусом данного способ является жёсткое задание размеров.
.parent < width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; >.block < width: 250px; height: 250px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; img < max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; >> 
Вариант 3. Таблица.
Задаём родителю табличные стили, ячейке родителя устанавливаем выравнивание текста по центру. А блоку задаём модель строчного блока. Минусами мы получаем не рабочие скроллбары, и в целом не эстетичность «эмуляции» таблицы.
.parent < width: 100%; height: 100%; display: table; position: absolute; top: 0; left: 0; .inner < display: table-cell; text-align: center; vertical-align: middle; >> .block < display: inline-block; img < display: block; border: none; >> 
Чтобы добавить скролл в данный пример, придётся добавить в конструкцию ещё один элемент. 
Пример: jsfiddle.net/serdidg/xkb615mu.
Вариант 4. Псевдо-элемент.
Данный вариант лишён всех проблем, перечисленных у предыдущих способов, а так же решает первоначально поставленные задачи. Суть состоит в том, чтобы у родителя задать стили псевдо-элементу before, а именно 100% высоту, выравнивание по центру и модель строчного блока. Так же само и у блока ставится модель строчного блока, выравнивание по центру. Чтобы блок не «падал» под псевдо-элемент, когда размеры первого больше чем родителя, указываем родителю white-space: nowrap и font-size: 0, после чего у блока отменяем эти стили следующими — white-space: normal. В данном примере font-size: 0 нужен для того, чтобы убрать образовавшийся пробел между родителем и блоком в связи с форматированием кода. Пробел можно убрать и иными способами, но лучшим считается просто его не допускать.
.parent < width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &::before < height: 100%; display: inline-block; vertical-align: middle; content: ''; >> .block < display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img < display: block; border: none; >> 
либо, если вам нужно, чтобы родитель занимал только высоту и ширину окна, а не всей страницы:
.parent < position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &::before < height: 100%; display: inline-block; vertical-align: middle; content: ''; >> .block < display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img < display: block; border: none; >> 
Вариант 5. Flexbox.
Одним из самых простых и элегантных способов является использования flexbox. Но имейте ввиду, что центральное позиционирование сохраняется даже если родительский блок меньше дочернего, последний будет выходить за рамки и обрезаться.
.parent < width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; align-items: center; align-content: center; justify-content: center; overflow: auto; >.block < background: #60a839; img < display: block; border: none; >> 
В случае, если при уменьшении родительского блока дочерний не должен обрезаться по краям, используйте авто маржины:
.parent < width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; overflow: auto; >.block < margin: auto; background: #60a839; img < display: block; border: none; >> 
Вариант 6. Transform.
Подходит в случае если мы ограничены структурой, и нет возможности манипулировать родительским элементом, а блок выровнять как-то нужно. На помощь придёт css функция translate() . При значение 50% абсолютное позиционирование расположит верхний левый угол блока точно по центру, затем отрицательное значение translate сдвинет блок относительно своих собственных размеров. Учтите, что могут всплыть негативные эффекты в виде размытых граней или начертания шрифта. Также подобный способ может привести к проблемах с вычислением положения блока с помощью java-script'а. Иногда для компенсации потери 50% ширины из-за использования css свойства left может помочь заданное у блока правило: margin-right: -50%; .
.parent < width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: auto; >.block < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); img < display: block; >> 
Вариант 7. Кнопка.
Пользователь azproduction предложил вариант, где блок обрамляется в тег button. Кнопка имеет свойство центрировать всё, что находится у неё внутри, а именно элементы строчной и блочно-строчной (inline-block) модели. На практике использовать не рекомендую.
.parent < width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; background: none; border: none; outline: none; appearance: none; >.block < display: inline-block; img < display: block; border: none; >> 
Бонус
Используя идею 4-го варианта, можно задавать внешние отступы для блока, и при этом последний будет адекватно отображаться в окружении скроллбаров. 
Пример: jsfiddle.net/serdidg/ugnp8ry7.
Так же можно выравнивать картинку по центру, и в случае если картинка больше родителя, масштабировать её по размеру родителя. 
Пример: jsfiddle.net/serdidg/Lhpa1s70. 
Пример с большой картинкой: jsfiddle.net/serdidg/tor2yudn.
Читать:
Картинка почему