• Выравнивание элемента по вертикали css. Способы вертикального выравнивания по центру в CSS

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

    Выравнивание текста по вертикали можно добиться по меньшей мере пятью разными способами. Каждый из них по-своему хорош, учитывая обстоятельства и детали ситуации. Мы рассмотрим несколько примеров, а вы исходя из условий, подберете себе подходящее ращение.

    Первый метод с line-height

    Первый способ очень банальный и с большим недостатком, что ограничивает его в применении. Но все же, как ни крути, он может пригодиться и даже принести нужный результат. Это будет условным выравниванием, так как, по сути, мы задаем высоту строки в соответствии с высотой блока, использовав свойство line-height .

    первый пример. демо №1

    первый пример. демо №1

    /* №1 */ .talign1{ border: 1px solid red; height:200px;/* высота блока */ } .talign1 > p{ line-height:200px;/* устанавливаем высоту строки в соответствии с высотой блока */ margin:0;/* убираем внешние отступы, если они есть */ text-align:center;/* выравниваем текст по центре по горизонтали */ padding: 0;/* убираем внутренние отступы, если они есть */ } /* end №1*/

    Точно таким же способом возможно реализовать картинку по центру вертикали, но добавив одно новое свойство vertical-align: middle; .

    Пример. Демо №2

    Пример. Демо №2

    /* №2 */ .talign2{ border: 1px solid red; line-height:200px;/* высота строки блока */ } .talign2 div{ text-align:center;/* выравниваем элементов по центре по горизонтали */ } .talign2 img{ vertical-align:middle;/* выравниваем картинки по центре по вертикали */ border: 1px solid black; } /* end №2*/

    Выравнивание со свойством position

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

    Поэтому нужно задать отрицательное значение к внешним отступам. Размер отступа сверху должен соответствовать половине высоты внутреннего блока, а отступ слева — на половину ширины. Таким образом, получим абсолютный центр.

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

    /* №3 */ .talign3{ border: 1px solid red; height:200px;/* высота блока */ position: relative; } .talign3 div{ position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -5% 0 0 -25%; border: 1px solid black; } /* end №3*/

    Выравнивание со свойством table

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

    применять не будет, а воспользуемся свойствами CSS, такими как display: table; , display: table-cell; . В старых версиях IE данный способ не работает, да и не нужно. Ими, вообще, еще кто-то пользуется?

    Пример. демо №4

    Пример. демо №4

    /* №4 */ .talign4{ border: 1px solid red; height:200px;/* высота блока */ display: table; width: 100%; } .talign4 div{ display: table-cell; vertical-align: middle; text-align:center; } /* end №4*/

    Выравнивание со свойством flex

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

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

    Но не бойтесь: если вы уже боретесь с CSS вертикальным выравниванием - вы обратились по адресу.

    Поговорим о свойстве CSS vertical align

    Когда я только начинал работать в области веб-разработки, то немного помучился с этим свойством. Я думал, что оно должно работать, как классическое свойство “text-align ”. Ах, если бы все было так просто…

    CSS свойство vertical-align отлично работает с таблицами, но не с div или другими элементами. Когда вы используете его для div , то оно выравнивает элемент относительно других блоков, но не его содержимое. При этом свойство работает только с display: inline-block; .

    Посмотрите пример

    Мы хотим центрировать контент, а не сам div!

    У вас есть два выхода. Если у вас только элементы div с текстом, то можно использовать свойство line-height . Это означает, что нужно знать высоту элемента, но нельзя ее устанавливать. Таким образом, ваш текст будет всегда в центре.

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

    Взгляните на этот пример

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

    Чтобы это работало, должен быть родительский контейнер с display: table , а внутри него – нужное количество столбцов, которое вы хотите центрировать с помощью display: table-cell и vertical-align: middle .

    Посмотрите пример

    Почему это работает с табличной разметкой, но не с элементами div ? Потому что у строк в таблице одинаковая высота. Когда содержимое ячейки таблицы не использует все доступное пространство по высоте, браузер автоматически добавляет вертикальные отступы, чтобы центрировать содержимое.

    Свойство position

    Начнем с основ выравнивания по вертикали CSS div :

    • position: static - это значение по умолчанию. Элемент отображается в соответствии с порядком HTML ;
    • position: absolute - используется, чтобы определить точное положение элемента. Эта позиция всегда связана с ближайшим относительно позиционированным родительским элементом (не static ). Если не определить точное положение элемента, вы потеряете контроль над ним. Он отобразится случайно, полностью игнорируя поток документа. По умолчанию элемент отображается в левом верхнем углу;
    • position: relative - используется для позиционирования элемента относительно его нормального положения (статического ). Это значение сохраняет порядок потока документа;
    • position: fixed - используется для позиционирования элемента относительно окна браузера, поэтому он всегда отображается в области просмотра.

    Примечание: некоторые свойства (top и z-index ) работают только в том случае, если для элемента задано значение position (не static ).

    Давайте приступим к делу!

    Вы хотите осуществить CSS выравнивание по центру по вертикали ? Сначала создайте элемент с относительной позицией и размерами. Например: 100% по ширине и высоте.

    Второй шаг может быть различным в зависимости от целевых браузеров, но можно использовать один из двух вариантов:

    • Старое свойство : нужно знать точный размер окна, чтобы удалить половину ширины и половину высоты. Посмотрите пример ;
    • Новое свойство CSS3 : можно добавить свойство transform со значением translate 50% и блок всегда будет в центре. Посмотреть пример .

    В принципе, если вы хотите центрировать контент, никогда не используйте top: 40% или left: 300px . Это прекрасно работает на тестовых экранах, но это не центровка.

    Помните position: fixed ? Можно сделать с ним то же самое, что и с абсолютной позицией, но вам не нужна относительная позиция для родительского элемента - она всегда будет позиционировать относительно окна браузера.

    Вы слышали о спецификации flexbox?

    Можно использовать flexbox . Это гораздо лучше, чем любой другой вариант выравнивания текста по центру CSS по вертикали . С flexbox управление элементами напоминает детскую игру. Проблема состоит в том, что нужно отбросить некоторые браузеры, такие как IE9 и версии ниже. Вот пример того, как вертикально центрировать блок:

    Посмотреть пример

    Используя flexbox расположение, можно центрировать несколько блоков.

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

    Ссылки и дополнительная литература

    Изучение CSS разметки

    FlexBox Froggy

    Песочница flexbox

    Перевод статьи “CSS Vertical Align for Everyone (Dummies Included) ” был подготовлен дружной командой проекта .

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

    В данной статье представлены некоторые готовые решения, которые помогут упростить работу по центрированию элементов по горизонтали и(или) по вертикали.

    Примечание: под каждым решением приведен список браузеров с указанием версий, в которых указанный CSS код работает.

    CSS - Выравнивание блока по центру

    1. Выравнивание одного блока по центру другого. При этом первый и второй блок имеют динамические размеры.

    ...
    ...

    Parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

    2. Выравнивание одного блока по центру другого. При этом второй блок имеет фиксированные размеры.

    Parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; /* ширина и высота 2 блока */ width: 500px; height: 250px; /* Значения определяются в зависимости от его размера */ /* margin-left = - width / 2 */ margin-left: -250px; /* margin-top = - height / 2 */ margin-top: -125px; }

    Браузеры, которые поддерживают данное решение:

    • Chrome 1.0+
    • Firefox 1.0+
    • Internet Explorer 4.0+
    • Opera 7.0+
    • Safari 1.0+

    3. Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах.

    Parent { position: relative; } .child { position: absolute; /* ширина и высота 2 блока в % */ height: 50%; width: 50%; /* Значения определяются в зависимости от его размера в % */ left: 25%; /* (100% - width) / 2 */ top: 25%; /* (100% - height) / 2 */ }

    Браузеры, которые поддерживают данное решение:

    • Chrome 1.0+
    • Firefox 1.0+
    • Internet Explorer 4.0+
    • Opera 7.0+
    • Safari 1.0+

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

    1. Выравнивание одного блочного элемента (display: block) относительно другого (в котором он расположен) по горизонтали:

    ...
    ...

    Block { margin-left: auto; margin-right: auto; }

    Браузеры, которые поддерживают данное решение:

    • Chrome 1.0+
    • Firefox 1.0+
    • Internet Explorer 6.0+
    • Opera 3.5+
    • Safari 1.0+

    2. Выравнивание строчного (display: inline) или строчно-блочного (display: inline-block) элемента по горизонтали:

    ...
    ...

    Parent { text-align: center; } .child { display: inline-block; }

    Браузеры, которые поддерживают данное решение:

    • Chrome 1.0+
    • Firefox 3.0+
    • Internet Explorer 8.0+
    • Opera 7.0+
    • Safari 1.0+

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

    1. Отцентровать один элемент (display: inline , display: inline-block) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS line-height .

    ...
    ...

    Parent { line-height: 500px; } .child { display: inline-block; vertical-align: middle; }

    Браузеры, которые поддерживают данное решение:

    • Chrome 1.0+
    • Firefox 3.0+
    • Internet Explorer 8.0+
    • Opera 7.0+
    • Safari 1.0+

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

    Parent { display: table; } .child { display: table-cell; vertical-align: middle; }

    Браузеры, которые поддерживают данное решение:

    • Chrome 1.0+
    • Firefox 1.0+
    • Internet Explorer 8.0+
    • Opera 7.5+
    • Safari 1.0+

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

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

    Выравнивание блоков с известными размерами

    Проще всего с помощью CSS выровнять блоки, у которых заранее известна высота (для выравнивания по вертикали) или ширина (для горизонтального выравнивания).

    Выравнивание при помощи padding

    Иногда можно не центрировать элемент, а добавить ему границы свойством "padding ".

    Например, есть картинка 200 на 200 пикселей, и требуется центрировать ее в блоке 240 на 300. Можем задать высоту и ширину внешнему блоку = 200px, и добавить по 20 пикселей сверху и снизу, и по 50 слева и справа.

    .example-wrapper1 { background : #535E73 ; width : 200px ; height : 200px ; padding : 20px 50px ; }

    Выравнивание абсолютно позиционированных блоков

    Если для блока задано "position: absolute ", тогда его можно позиционировать относительно ближайшего родителя с "position: relative". Для этого нужно всем свойствам ("top ","right ","bottom ","left ") внутреннего блока присвоить одинаковое значение, а также "margin: auto".

    *Есть нюанс: Ширина (высота) внутреннего блока + значение left (right, bottom, top) не должны превышать размеры родительского блока. Надежнее свойствам left (right, bottom, top) присваивать 0 (ноль).

    .example-wrapper2 { position : relative ; height : 250px ; background : url(space.jpg) ; } .cat-king { width : 200px ; height : 200px ; position : absolute ; top : 0 ; left : 0 ; bottom : 0 ; right : 0 ; margin : auto ; background : url(king.png) ; }

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

    Выравнивание посредством "text-align: center"

    Для выравнивания текста в блоке есть специальное свойство "text-align ". При установленном значении "center " каждая строка текста выровняется по горизонтали. Для многострочного текста такое решение используется крайне редко, чаще этот вариант можно встретить для выравнивания span-ов, ссылок или картинок.

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

    .example-text { text-align : center ; padding : 10px ; background : #FF90B8 ; }

    Стоит заметить, что это свойство будет работать не только для текста, но и для любых строчных элементов ("display: inline").

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

    .example-wrapper3 { text-align : center ; background : #FF90B8 ; } .inline-text { display : inline-block ; width : 40% ; padding : 10px ; text-align : left ; background : #FFE5E5 ; }

    Выравнивание блоков при помощи margin

    Блочные элементы с известной шириной легко выравниваются по горизонтали, если установить им "margin-left: auto; margin-right: auto". Обычно используется сокращенная запись: "margin: 0 auto " (вместо ноля может быть любое значение). Но вот для выравнивания по вертикали такой способ не подойдет.

    .lama-wrapper { height : 200px ; background : #F1BF88 ; } .lama1 { height : 200px ; width : 200px ; background : url(lama.jpg) ; margin : 0 auto ; }

    Именно так стоит выравнивать все блоки, где это возможно (где не требуется фиксированное или абсолютное позиционирование) - он самый логичный и адекватный. Хоть это и кажется очевидным, но иногда видела устрашающие примеры с отрицательными отступами, поэтому решила уточнить.

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

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

    Выравнивание свойством line-height

    В том случае, когда в блоке только одна строка, можно добиться ее выравнивания по вертикали, применив свойство "line-height " и установив ему желаемую высоту. Для надежности стоит установить еще и "height", значение которого будет равно значению "line-height", потому что последние поддерживается не во всех браузерах.

    .example-wrapper4 { line-height : 100px ; color : #DC09C0 ; background : #E5DAE1 ; height : 100px ; text-align : center ; }

    Так же возможно добиться выравнивания блока с несколькими строками. Для этого придется использовать дополнительный блок-обертку, и устанавливать высоту строки ему. Внутренний блок может быть многострочным, но обязательно "inline". К нему нужно применить "vertical-align: middle".

    .example-wrapper5 { line-height : 160px ; height : 160px ; font-size : 0 ; background : #FF9B00 ; } .example-wrapper5 .text1 { display : inline-block ; font-size : 14px ; line-height : 1.5 ; vertical-align : middle ; background : #FFFAF2 ; color : #FF9B00 ; text-align : center ; }

    У блока обертки должно быть установлено "font-size: 0". Если не установить нулевой размер шрифта, то браузер добавит от себя несколько лишних пикселей. Также придется указать размер шрифта и высоту строки для внутреннего блока, ведь эти свойства наследуются от родителя.

    Выравнивание по вертикали в таблицах

    Свойство "vertical-align " также действует на ячейки таблицы. C установленным значением "middle", контент внутри ячейки выравнивается по центру. Конечно, табличная верстка в наше время считается архаической, но в исключительных случаях можно симулировать ее, указав "display: table-cell ".

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

    .one_product .img_wrapper { display : table-cell ; height : 169px ; vertical-align : middle ; overflow : hidden ; background : #fff ; width : 255px ; } .one_product img { max-height : 169px ; max-width : 100% ; min-width : 140px ; display : block ; margin : 0 auto ; }

    Следует помнить, что если у элемента установлено "float" отличное от "none", то он в любом случае будет блочным (display: block) - тогда придется использовать дополнительный блок-обертку.

    Выравнивание дополнительным inline-элементом

    И для inline-элементов можно применить "vertical-align: middle ". При этом все элементы с "display: inline ", которые находятся в одной строке, выровняются относительно общей центральной линии.

    Нужно создать вспомогательный блок с высотой, равной высоте родительского блока, тогда и желаемый блок выровняется по центру. Для этого удобно использовать псевдоэлементы:before или:after.

    .example-wrapper6 { height : 300px ; text-align : center ; background : #70DAF1 ; } .pudge { display : inline-block ; vertical-align : middle ; background : url(pudge.png) ; background-color : #fff ; width : 200px ; height : 200px ; } .riki { display : inline-block ; height : 100% ; vertical-align : middle ; }

    Display: flex и выравнивание

    Если Вас не сильно заботят пользователи Explorer 8 или заботят так сильно, что Вы готовы ради них вставить кусок лишнего javascript-a, то можно применять "display: flex". Flex-блоки отлично справляются с проблемами выравнивания, и достаточно написать "margin: auto" для центрирования контента внутри.

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

    .example-wrapper7 { display : flex ; height : 300px ; background : #AEB96A ; } .example-wrapper7 img { margin : auto ; }

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

    Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (Stephen Shaw) для Smashing Magazine - Absolute Horizontal And Vertical Centering In CSS .

    Все мы знали о margin: 0 auto; для горизонтального центрирования, но margin: auto; не работало для вертикального. Это можно легко исправить, просто задав высоту и применив следующие стили:

    Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
    Я не первый, кто предложил это решение, однако такой подход редко применяется при вертикальном выравнивании. В комментариях к статье How to Center Anything With CSS Simon ссылается на пример jsFiddle , где приводится отличное решение для вертикального центрирования. Вот еще несколько на эту тему.

    Рассмотрим способ поближе.

    Достоинства

    • Кроссбраузерность (включая IE 8-10)
    • Никакой дополнительной разметки, минимум стилей
    • Адаптивность
    • Независимость от padding (без box-sizing !)
    • Работает для изображений

    Недостатки

    • Должна быть задана высота (см. Variable Height)
    • Рекомендуется задать overflow: auto , чтобы контент не расползался
    • Не работает на Windows Phone

    Совместимость с браузерами

    Метод был протестирован, и прекрасно работает в Chrome, Firefox, Safari, Mobile Safari и даже IE 8-10. Один пользователь упоминал, что контент не выравнивается по вертикали на Windows Phone.

    Внутри контейнера

    Контент, размещенный в контейнер с position: relative будет прекрасно выравниваться:

    Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

    С использованием viewport

    Установим для контента position: fixed и зададим z-index:

    Absolute-Center.is-Fixed { width: 50%; height: 50%; overflow: auto; margin: auto; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 999; }

    Адаптивность

    Главное преимущество описываемого способа - это прекрасная работа, когда высота или ширина задана в процентах, да еще и понимание min-width/max-width и min-height/max-height .

    Absolute-Center.is-Responsive { width: 60%; height: 60%; min-width: 400px; max-width: 500px; padding: 40px; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

    Смещения

    Если на сайте присутствует фиксированная шапка или требуется сделать какой-то другой отступ, просто нужно добавить в стили код вроде top: 70px; Пока задан margin: auto; блок с контентом будет корректно центрироваться по высоте.

    Еще можно выравнивать контент по нужной стороне, оставляя центрирование по высоте. Для этого нужно использовать right: 0; left: auto; для выравнивания справа или left: 0; right: auto; для выравнивания слева.

    Absolute-Center.is-Right { width: 50%; height: 50%; margin: auto; overflow: auto; position: absolute; top: 0; left: auto; bottom: 0; right: 20px; text-align: right; }

    Много контента

    Для того, чтобы большое количество контента не позволяло верстке разъезжаться, используем overflow: auto . Появится вертикальная прокрутка. Также можно добавить max-height: 100%; если у контента нет дополнительных отступов.
    .Absolute-Center.is-Overflow { width: 50%; height: 300px; max-height: 100%; margin: auto; overflow: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

    Изображения

    Способ отлично работает и для изображений! Добавим стиль height: auto; тогда картинка будет масштабироваться вместе с контейнером.

    Absolute-Center.is-Image { width: 50%; height: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

    Изменяемая высота

    Описываемый способ требует заданной высоты блока, которая может быть указана в процентах и контролироваться с помощью max-height , что делает метод идеальным для адаптивных сайтов. Один из способов не задавать высоту - использование display: table . При этом блок контента центрируется независимо от размера.

    Могут возникнуть проблемы с кроссбраузерностью, возможно следует использовать способ с table-cell (описан ниже).

    • Firefox/IE8: использование display: table выравнивает блок вертикально по верхней границе документа.
    • IE9/10: использование display: table выравнивает блок по левому верхнему углу страницы.
    • Mobile Safari: если ширина задана в процентах, страдает горизонтальное центрирование
    .Absolute-Center.is-Variable { display: table; width: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

    Другие способы

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

    Отрицательный margin

    Наверное, самый популярный способ. Подходит, если известны размеры блока.

    Is-Negative { width: 300px; height: 200px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -170px; /* (width + padding)/2 */ margin-top: -120px; /* (height + padding)/2 */ }
    Преимущества:

    • Кроссбраузерность
    • Минимальный код
    Недостатки:
    • Не адаптивный
    • Ползет верстка, если в контейнере слишком много контента
    • Приходится компенсировать отступы или использовать box-sizing: border-box

    Использование transform

    Один из самых простых способов, поддерживает изменение высоты. Есть подробная статья на эту тему - "Centering Percentage Width/Height Elements " от CSS-Tricks.

    Is-Transformed { width: 50%; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
    Преимущества:

    • Изменяемая высота
    • Минимальный код
    Недостатки:
    • Не работает в IE 8
    • Использование префиксов
    • Может мешать работе других эффектов с transform
    • В некоторых случаях при рендеринге размываются края блока и текст

    Table-cell

    Возможно один из самых лучших и простых способов. Подробно описан в статье "Flexible height vertical centering with CSS, beyond IE7 " от 456bereastreet. Главный недостаток - дополнительная разметка: требуется аж три элемента:

    <!-- CONTENT -->

    CSS:
    .Pos-Container.is-Table { display: table; } .is-Table .Table-Cell { display: table-cell; vertical-align: middle; } .is-Table .Center-Block { width: 50%; margin: 0 auto; }
    Преимущества:

    Недостатки:
    • Сложная структура

    Flexbox

    Будущее CSS, flexbox будет решать множество сегодняшних проблем верстки. Подробно об этом написано в статье Smashing Magazine, которая называется Centering Elements with Flexbox .

    Pos-Container.is-Flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }
    Преимущества:

    • Контаент может быть любой высоты или ширины
    • Может использоваться в более сложных случаях
    Недостатки:
    • Нет поддержки IE 8-9
    • Требуется контейнер или стили в body
    • Требует множество разнообразных префиксов для корректной работы в современных браузерах
    • Возможные проблемы производительности

    Итог

    Каждый способ имеет преимущества и недостатки. По сути, выбор сводится к выбору браузеров, которые должны поддерживаться
    Читать еще: