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

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

Вот два элемента div:

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

line-height для одной строки

Когда родитель занимает одну строку текста и высота потомка известна, можно применить свойство line-height. Значение свойства должно быть равным высоте внешнего блока. Это работает только для одной строки, поэтому потомку полезно добавить overflow: hidden и запрет переноса строки white-space: nowrap.

Не получится воспользоваться процентной записью line-height=100%, потому что 100% в этом случае — высота шрифта.

Container {
height: 300px;
line-height: 300px;
}

Inner {
white-space: nowrap;
overflow: hidden;
}

Способ применим только при известной высоте внешнего блока.

Таблица с vertical-align

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

Baseline — по умолчанию;
. bottom — содержимое внизу ячейки;
. middle — содержимое посередине ячейки;
. top — содержимое вверху ячейки.

В первом примере внешним блоком становится одинокая ячейка таблицы.

Container {
display: table-cell;
vertical-align: middle;
}

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

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

Outer-wrapper {
display: table;
}

Container {
display: table-cell;
vertical-align: middle;
}

Position: absolute + отрицательный margin

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

Значение свойства top, равное 50%, заставляет вложенный элемент расположиться верхним краем посередине внешнего блока. Остается поднять его отрицательным margin-top на половину собственной высоты, чтобы он встал точно по центру вертикали.

Container {
position: relative;
}

Inner {
height: 140px;
position: absolute;
top: 50%;
margin-top: -70px;
}

Недостаток этого способа в необходимости знать высоту потомка.

Выравнивание в строке с vertical-align

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

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

Для внешнего блока прописывается центрирование одной строки.

Container {
height: 140px;
line-height: 140px;
}

Значение line-height для внутреннего блока переопределяется на normal или на любую требуемую величину. Ему же задается выравнивание vertical-align: middle и преобразование в строчно-блочный тип — display: inline-block.

Inner {
display: inline-block;
line-height: normal;
vertical-align: middle;
}

Недостаток способа — надо знать высоту родителя.

Выравнивание с помощью transform

Функция translateY свойства transform позволяет отцентрировать внутренний блок с неизвестной высотой. Для этого родитель должен быть спозиционирован относительно, а потомок — абсолютно.

Свойство top со значением 50% опускает внутренний блок так, что его верхний край располагается посередине родителя. Значение translateY: -50%, поднимает элемент на половину его собственной высоты и тем самым совмещает вертикальные центры блоков.

Container {
position: relative;
}

Inner {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

Недостаток приема в ограниченной поддержке функций transform браузером IE.

Выравнивание через псевдоэлемент

Способ работает, когда высота неизвестна ни для первого, ни для второго блока. Внутрь родителя с помощью before или after добавляется строчный псевдоэлемент inline-block. Высота добавленного элемента должна равняться высоте родителя — height: 100%. Вертикальное выравнивание содержимого задается посредством vertical-align: middle.

С помощью vertical-align: middle относительно этого псевдоэлемента выравнивается внутренний блок. Так как родитель и потомок имеют одинаковую высоту, внутренний элемент, выравниваясь по вертикали с псевдоэлементом, центрируется также и с внешним блоком.

Container:before {
content: "";
height: 100%;
vertical-align: middle;
display: inline-block;
}

Inner {
display: inline-block;
vertical-align: middle;
}

Универсальный способ. Не работает если внутреннему блоку задано абсолютное позиционирование.

Flexbox

Самый новый и простой способ выравнивания элементов по вертикали. Flexbox позволяет расставлять элементы Web-страницы как угодно. Чтобы выровнять блок по центру, достаточно родителю прописать display: flex, а потомку margin: auto.

Container {
display: flex;
width: 320px;
height: 140px;
}

Inner {
width: 120px;
margin: auto;
}

Flexbox работает только в современных браузерах.

Выбор способа

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

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

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

1. Таблица. Родителем становится ячейка таблицы, созданная в HTML или через display-table/display-cell. Этому элементу-родителю присваивается vertical-align: middle.

2. Псевдоэлемент. Для внешнего блока создается строчно-блочный псевдоэлемент с width=100% и vertical-align: middle. Потомку прописываются display: inline-block и vertical-align: middle. Способ не работает только когда внутреннему блоку задано абсолютное позиционирование.

3. Transform. Родитель получает position: relative. Потомку присваивается position: absolute, top: 50% и transform: translateY(-50%);

4. Flexbox. Внешнему блоку ставится display: flex, внутреннему — margin: auto.

Известна только высота потомка

Внешний блок позиционируется относительно; внутреннему элементу прописываются абсолютное позиционирование, top: 50% и margin-top, равный половине его высоты.

Одна строка в блоке с известной высотой

Внешнему блоку задается свойство line-height со значением, равным его высоте.

Высота внешнего блока известна, а внутреннего элемента - нет.

Родителю ставится line-height равный его высоте. У потомка значение line-height переопределяется на normal или на любую требуемую величину, и задаются ему display: inline-block и vertical-align: middle.

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

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

Проще всего с помощью 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 выравнивание. Теперь центрирование контента не будет представлять собой проблему!

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

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

Выравнивание по горизонтали при помощи margin используется при известной ширине центрируемого элемента. Работает для блочных элементов:

Elem { margin-left: auto; margin-right: auto; width: 50%; }

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

text-align: center

Данный способ подходит для выравнивания по центру текста в пределах блока. text-align: center:

Выравнивание с помощью text-align .wrapper { text-align: center; }

Я выровнен по центру

position и отрицательный margin влево

Подойдет для центрируемых блоков известной ширины. Задаем родительскому блоку position: relative для позиционирования относительно него, центрируемому элементу position: absolute , left: 50% и отрицательный margin-left , значение которого равно половине ширины элемента:

Выравнивание с помощью position .wrapper { position: relative; } .wrapper p { left: 50%; margin: 0 0 0 -100px; position: absolute; width: 200px; }

Я выровнен по центру

display: inline-block + text-align: center

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

Выравнивание с помощью display: inline-block + text-align: center; .navigation { text-align: center; } .navigation li { display: inline-block; }

• Главная
• Об авторе

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

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

line-height .wrapper { height: 100px; line-height: 100px; }

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

position и отрицательный margin вверх

Элемент можно выравнить по вертикали, задав ему фиксированную высоту и применив position: absolute и отрицательный margin вверх, равный половине высоты выравниваемого элемента. Родительскому блоку должен быть присвоен position: relative:

Wrapper { position: relative; } elem { height: 200px; margin: -100px 0 0; position: absolute; top: 50%; }

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

display: table-cell

Для вертикального выравнивания применяется свойство display: table-cell элементу, которое заставляет эмулировать ячейку таблицы. Ему же задаем высоту и vertical-align: middle . Все это обернем в контейнер со свойством dislpay: table; :

Вертикальное выравнивание display: table-cell .wrapper { display: table; width: 100%; } .cell { display: table-cell; height: 100px; vertical-align: middle; }

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

Динамическое выравнивание элемента на странице

Мы рассмотрели способы выравнивания элементов на странице при помощи CSS. Теперь взглянем на реализацию варианта с jQuery.

Подключим jQuery на страницу:

Я предлагаю написать простую функцию центрирования элемента на странице, назовем ее alignCenter() . В качестве аргумента функции выступает сам элемент:

Function alignCenter(elem) { // код здесь }

В теле функции динамически вычислим и повесим координаты центра страницы свойствам CSS left и top:

Function alignCenter(elem) { elem.css({ left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem.height()) / 2 + "px" // не забывайте добавить элементу position: absolute для срабатывания координат }) }

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

Фукнция готова, остается навесить ее на события готовности DOM и ресайза окна:

$(function() { // вызов функции центрирования при готовности DOM alignCenter($(elem)); // вызов функции при ресайзе окна $(window).resize(function() { alignCenter($(elem)); }) // функция центрирования элемента function alignCenter(elem) { elem.css({ // вычисление координат left и top left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem.height()) / 2 + "px" }) } })

Применение Flexbox

Постепенно входят в повседневность новые возможности CSS3, такие как Flexbox. Технология помогает создавать разметку без использования float’ов, позиционирования и т.д. В том числе ее можно применять и для центрирования элементов. Например применим Flexbox для родительского элемента.wrapper и центрируем контент внутри:

Wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 500px; width: 500px; } .wrapper .content { margin: auto; /* margin: 0 auto; только по горизонтали */ /* margin: auto 0; только по вертикали */ } Lorem ipsum dolor sit amet

Это правило центрирует элемент по горизонтали и вертикали одновременно — margin работает теперь не только для горизонтального выравнивания, но и для вертикального. Причем без известной ширины/высоты.

Ресурсы по теме Помощь проекту

CSS ,

HTML

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

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

Сравним следующие подходы. Выравнивание с помощью:

• таблицы,
• отступов,
• line-height ,
• растягивания,
• отрицательного margin ,
• transform ,
• псевдоэлемента,
• flexbox .

В качестве иллюстрации рассмотрим следующий пример.

Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner .

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

Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны . Добавим внутреннему элементу правило display: inline-block , а внешнему − text-align: center и vertical-align: middle .

Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block .

Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.

Outer { width: 200px; height: 200px; text-align: center; vertical-align: middle; background-color: #ffc; } .inner { display: inline-block; width: 100px; height: 100px; background-color: #fcc; }
После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
http://jsfiddle.net/c1bgfffq/

Почему так произошло? Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки (inline-block) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.

Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.

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

http://jsfiddle.net/c1bgfffq/1/

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

Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.

.outer-wrapper { display: table; } .outer { display: table-cell; }
Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.

Выравнивание с помощью отступов Если высоты внутреннего и внешнего блока известны, то выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (H outer – H inner) / 2.

Outer { height: 200px; } .inner { height: 100px; margin: 50px 0; }
http://jsfiddle.net/c1bgfffq/6/

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

Выравнивание с помощью line-height Если известно, что внутренний блок должен занимать не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. Поскольку контент внутреннего блока не должен переноситься на вторую строку, рекомендуется также добавить правила white-space: nowrap и overflow: hidden .

Outer { height: 200px; line-height: 200px; } .inner { white-space: nowrap; overflow: hidden; }
http://jsfiddle.net/c1bgfffq/12/

Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .

Outer { height: 200px; line-height: 200px; } .inner { line-height: normal; display: inline-block; vertical-align: middle; }
http://jsfiddle.net/c1bgfffq/15/

Минус данного способа заключается в том, что должна быть известна высота внешнего блока.

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

Для этого нужно:

задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное;

добавить внутреннему блоку правила top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;

установить значение auto для вертикальных отступов внутреннего блока.

.outer { position: relative; } .inner { height: 100px; position: absolute; top: 0; bottom: 0; margin: auto 0; }
http://jsfiddle.net/c1bgfffq/4/

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

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

Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top: -H inner / 2.

Outer { position: relative; } .inner { height: 100px; position: absolute; top: 50%; margin-top: -50px; }
http://jsfiddle.net/c1bgfffq/13/

Минус данного способа - должна быть известна высота внутреннего блока.

Выравнивание с помощью transform Данный способ похож на предыдущий, но он может быть применен, когда высота внутреннего блока неизвестна. В этом случае вместо задания отрицательного отступа в пикселях можно воспользоваться свойством transform и поднять внутренний блок вверх с помощью функции translateY и значения -50% .

Outer { position: relative; } .inner { position: absolute; top: 50%; transform: translateY(-50%); }
http://jsfiddle.net/c1bgfffq/9/

Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .

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

Выравнивание с помощью Flexbox Самый современный способ вертикального выравнивания это использовать Flexible Box Layout (в народе известен как Flexbox). Данный модуль позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.

Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда?

Outer { display: flex; width: 200px; height: 200px; } .inner { width: 100px; margin: auto; }
http://jsfiddle.net/c1bgfffq/14/

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

Какой способ выбрать? Нужно исходить из постановки задачи:

• Для вертикального выравнивания текста лучше использовать вертикальные отступы или свойство line-height .
• Для абсолютно позиционированных элементов с известной высотой (например, иконок) идеально подойдет способ с отрицательным свойством margin-top .
• Для более сложных случаев, когда неизвестна высота блока, нужно использовать псевдоэлемент или свойство transform .
• Ну а если вам повезло настолько, что не нужно поддерживать старые версии браузера IE, то, конечно, лучше использовать Flexbox .

Часто при вёрстке возникает потребность в вертикальном выравнивании текста в блоке. Если это нужно сделать в ячейке таблицы, то задается значение CSS-свойства vertical-align.

Но возникает резонный вопрос, нельзя ли обойтись без таблицы, без перегрузки разметки страницы лишними тегами? Ответ: «можно», но из-за плохой поддержки CSS браузером MSIE решение задачи для него будет отличаться от решения для остальных распространённых браузеров.

В качестве примера рассмотрим следующий фрагмент:

div {
border: 1px solid #000;
height: 10em;
width: 10em;
}


Some text

и попытаемся вертикально выровнять текст по центру блока и по нижнему краю блока.

Решение задачи «Правильные» браузеры (включая MSIE

Большинство современных браузеров поддерживают CSS2.1, а именно значение table-cell для свойства display. Это даёт нам возможность заставить блок с текстом отображаться как ячейка таблицы и, воспользовавшись этим, выровнять текст по вертикали:

div {
display: table-cell;
vertical-align: middle;
}

div {
display: table-cell;
vertical-align: bottom;
}

Internet Explorer (до 7-й версии включительно)

Решить задачу выравнивания текста по нижнему краю блока в MSIE можно с помощью абсолютного позиционирования (тут нам пригодится строковой элемент вложенный в блок):

div {
position: relative;
}
div span {
display: block;
position: absolute;
bottom: 0%;
left: 0%;
width: 100%;
}

Этот набор правил работает и в «правильных» браузерах.

Указывать свойства

Div span {
display: block;
width: 100%;
}

не обязательно, но они могут понадобиться, если помимо вертикального выравнивания текста планируется использовать также горизонтальное, например, text-align: center ;.

Для вертикального выравнивания текста по центру блока исходный фрагмент придётся всё же усложнить - введём ещё один строковый элемент:

Материал для изучения:

• Vertical Centering in CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
• Vertical centering using CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
• Vertical align (www.cssplay.co.uk/ie/valign.html)
• vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
• Еще один способ вертикального выравнивания в CSS (cssing.org.ua/2007/04/26/another-css-valign-method)