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

Начнем с общего описания задачи.

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

Большинство людей, используя свойство text-align: , обращаются к свойству vertical-align для центрирования по вертикали. Все выглядит достаточно логично. Если вы использовали табличные шаблоны, то наверняка активно использовали атрибут valign , который укрепляет веру в то, что vertical-align правильный путь к решению задачи.

Но атрибут valign работает только в ячейках таблицы. А свойство vertical-align очень на него похоже. Оно также действует на ячейки таблицы и некоторые строчные элементы.

Значение свойства vertical-align действует по отношению к родительскому строчному элементу.

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

Но, к сожалению, свойство vertical-align не действует в блочных элементах (например, параграфах внутри элемента div ). Такое положение может привести к мысли, что решения задачи вертикального выравнивания нет.

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

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

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

Нужный текст

#child { line-height: 200px; }

Данный метод работает во всех браузерах, хотя использовать его можно только для одной строки. Значение 200 px в примере выбрано произвольно. Можно использовать любые величины больше размера шрифта текста.

А что если содержание представляет собой картинку? Будет ли выше описанный метод работать? Ответ заключается в еще одной строчке кода CSS.

#parent { line-height: 200px; } #parent img { vertical-align: middle; }

Значение свойства line-height должно быть больше высоты изображения.

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

Примечание: Таблица CSS не является тем же, что и HTML таблица.

Содержание

#parent {display: table;} #child { display: table-cell; vertical-align: middle; }

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

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

Недостатком данного метода является то, что он не работает в старых версиях IE. Приходится использовать свойство display: inline-block для вложенного контейнера.

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

В коде примера выполняется одновременное центрирование по горизонтали и вертикали:

Содержание

#parent {position: relative;} #child { position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -25%; }

Сначала устанавливаем тип позиционирования элементов. Затем для вложенного элемента div устанавливаем значения свойств top и left равными 50%, что соответствует центру родительского элемента. Но в центр попадает левый верхний угол вложенного элемента. Поэтому нужно поднять его вверх (на половину высоты) и сдвинуть влево (на половину ширины), и тогда центр совпадет с центром родительского элемента. Так что знание высоты элемента в данном случае необходимо. Затем задаем элементу отрицательные значения верхнего и левого полей равными половине высоты и ширины соответственно.

Данный метод работает не во всех браузерах.

В коде примера выполняется центрирование по вертикали и горизонтали.

Содержание

#parent {position: relative;} #child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 30%; margin: auto; }

Идея данного метода заключается в том, чтобы растянуть вложенный элемент до всех 4 границ родительского элемента с помощью установки свойствам top, bottom, right, и left значения 0.

Установка автоматического формирования полей по всем сторонам приведет к заданию равных значений по всем 4 сторонам и выведет наш вложенный элемент div по центру родительского элемента.

К сожалению, данный метод не работает в IE7 и ниже.

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

Содержание

#parent { padding: 5% 0; } #child { padding: 10% 0; }

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

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

Например, если родительский элемент имеет высоту 400 px, а вложенный элемент - 100px, то необходимы отступы 150px сверху и снизу.

150 + 150 + 100 = 400

Использование % позволяет расчеты оставить браузеру.

Данный метод работает везде. Обратной стороной является необходимость в расчетах.

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

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

Содержание

#parent {height: 250px;} #floater { float: left; height: 50%; width: 100%; margin-bottom: -50px; } #child { clear: both; height: 100px; }

Мы смещаем пустой div влево или вправо и задаем для него высоту 50% родительского элемента. Таким образом, он будет заполнять верхнюю половину родительского элемента.

Так как данный div является плавающим, то он удаляется из обычного потока документа, и нам нужно отменить обтекание текстом для вложенного элемента. В примере используется clear: both , но вполне достаточно использовать тоже направление, что и смещение плавающего пустого элемента div .

Верхняя граница вложенного элемента div находится непосредственно под нижней границей пустого элемента div . Нам нужно сместить вложенный элемент вверх на половину высоты плавающего пустого элемента. Для решения задачи используется отрицательное значение свойства margin-bottom для плавающего пустого элемента div .

Данный метод также работает во всех браузерах. Однако его использование требует дополнительного пустого элемента div и знаний о высоте вложенного элемента.

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

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

Существует два основных типа построения структуры сайта:

• Табличная;
• Блочная.

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

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

Кроме высокой скорости загрузки блочное построение сайта позволяет в несколько раз уменьшить объем кода html . В том числе и за счет использования классов CSS .

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

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

В блочной верстке позиционирование слоев лучше осуществлять с помощью средств каскадных таблиц стилей. Основным свойством CSS, отвечающим за расположение , является float.
Синтаксис свойства:
float: left | right | none | inherit ,
Где:

• left – выравнивание элемента по левому краю экрана. Обтекание остальными элементами происходит справа;
• right – выравнивание справа, обтекание остальными элементами – слева;
• none – обтекание не допускается;
• inherit – наследование значения родительского элемента.

Рассмотрим облегченный пример позиционирования блоков div с помощью этого свойства:

#left { width: 200px; height: 100px; float: left; background: rgb(255,51,102); } #right { width: 200px; height: 100px; float: right; background: rgb(0,255,153); } Левый блок Правый блок

Теперь постараемся с помощью этого же свойства расположить третий div по центру страницы. Но, к сожалению, у float нет значения center . А при задании новому блоку значения выравнивания вправо или влево он сдвигается в указанную сторону. Поэтому остается лишь всем трем блокам задать float: left :

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

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

#container { width: 600px; margin: 0 auto; } #left { width: 200px; height: 100px; float: left; background: rgb(255,51,102); } #right { width: 200px; height: 100px; float: left; background: rgb(0,255,153); } #center { width: 200px; height: 100px; float: left; background: rgb(255,0,0); } Левый блок Центральный блок Правый блок

Этот же пример показывает, как можно отцентровать div по горизонтали. А если немного отредактировать приведенный выше код, то можно добиться вертикального выравнивания блоков. Для этого нужно лишь изменить длину слоя-контейнера (уменьшить его ). То есть после редактирования его css класс должен выглядеть вот так:

После изменения все блоки выстроятся строго в ряд посредине. И их положение не изменится при любых размерах окна браузера. Вот как выглядит такое центрирование div по центру по вертикали:

В следующем примере для центрирования слоев внутри контейнера мы использовали ряд новых свойств css :

#container { width: 450px; height:150px; margin:0 auto; background-color:#66CCFF; } #left { width: 100px; height: 100px; background: rgb(255,51,102); display: inline-block; vertical-align: middle; margin-left: 35px; } #right { width: 100px; height: 100px; background: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-left: 35px; } #center { width: 100px; height: 100px; background: rgb(255,0,0); display: inline-block; vertical-align: middle; margin-left: 35px; }

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

• display: inline-block – выравнивает блочный элемент в строку и обеспечивает его обтекание другим элементом;
• vertical-align: middle – выравнивает элемент посредине относительно родительского;
• margin-left – устанавливает отступ слева.

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

#layer1{ width: 500px; height: 100px; background: rgb(51,255,204); border:groove; } a { display: block; text-align: center; height: 100%; color: rgb(255,0,51); } Ссылка на наш сайт

В данном примере с помощью строки display: block мы задали ссылке значение блочного элемента. А чтобы вся высота блока div стала ссылкой, установили height : 100%.

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

Особенно это касается главной страницы, стоимость размещения рекламы на которой является самой высокой. Поэтому и появляется проблема, куда бы «впихнуть » еще один рекламный баннер. И тут уж выравниванием div по центру страницы никак не отделаешься!

Более рациональным решением является сделать какой-нибудь блок скрывающимся. Вот простой пример такой реализации:

#layer1{ display:block; width: 500px; height: 100px; background: rgb(51,255,204); border:groove; } function show() { if(layer1=="none") { layer1="block"; } else { layer1="none"; } document.getElementById("layer1").style.display=layer1; }

Это волшебная кнопка. Нажатие на нее скроет или отобразит скрывающийся блок.

В данном примере расположение div блоков никак не меняется. Здесь используется простейшая функция JavaScript , меняющая значение свойства css display после нажатия на кнопку (событие onclick ).

Синтаксис display :
display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group

Как видите, данное свойство может принимать множество значений. Поэтому является очень полезным и может использоваться для позиционирования элементов. В одном из предыдущих примеров с помощью одного из его значений (inline-block ) мы реализовали выравнивание div внутри div по центру.

Для скрытия и показа слоя мы использовали два значения свойства display .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Наша страница состоит из четырех блоков: шапки (header), меню (menu), содержимого (content) и низа сайта (footer). Для выравнивания по центру страницы мы поместим эти четыре блока в один главный блок (main):

Шапка сайта

Содержимое

Низ сайта

На примере этой структуры рассмотрим несколько вариантов.

Верстка и центрирование резинового сайта

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

Следовательно, ширина блоков "header" и "footer" будет составлять 100% ширины экрана. Ширина блока "menu" пусть будет 30%, а блок "content" должен располагаться рядом с блоком "menu", т.е. он должен иметь левое поле (margin-left) шириной равной ширине блока "menu", т.е. 30%.

Чтобы блоки "menu" и "content" располагались рядом, сделаем блок "menu" плавающим и прижмем его к левому краю. Также зададим цвета фона (background) для наших блоков. Теперь запишем все это в таблицу стилей (на странице style.css)

#header{ background:#3e4982; width:100%; height:110px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; } #menu{ background:#6173cb; float:left; width:30%; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; } #content{ background:#ffffff; margin-left:30%; height:300px; text-align:center; } #footer{ background:#3e4982; clear:both; width:100%; height:50px; text-align:center; color:#FFFFFF; font-size:14px; padding-top:10px; }

Высоту блоков задали условно, чтобы был виден результат. Посмотрите на нашу страницу в браузере:

Если вы будете менять размеры окна браузера, то будет меняться ширина всех блоков. Это не всегда удобно, т.к. при растягивании блока меню возникает пустое место. Поэтому чаще ширину блока "menu" делают фиксированной, давайте и мы так сделаем. Для этого заменим в таблице стилей значения соответствующих свойств:

... #menu{ background:#6173cb; float:left; width:200px; height:300px; } #content{ background:#ffffff; margin-left:200px; height:300px; } ...

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

Но если хочется можно сделать так, чтобы ваша страница имела равные отступы слева и справа экрана. Для этого надо добавить стиль блоку "main", который является контейнером для всех остальных блоков:

Теперь наша страница выглядит так:

Верстка и центрирование сайта, фиксированной ширины

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

#main{ width:800px; } #header{ background:#3e4982; width:800px; height:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; } #menu{ background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; } #content{ background:#ffffff; margin-left:200px; height:300px; text-align:center; } #footer{ background:#3e4982; clear:both; width:800px; height:50px; text-align:center; color:#FFFFFF; font-size:14px; padding-top:10px; }

Сейчас наша страница прижата к левому краю экрана.

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

Сделаем так: зададим тегу "body" ширину в 800 пикселов (как и у блока "main") и левый отступ (padding-left) в 50%. Тогда все содержимое блока "main" будет отображаться в правой части экрана (т.е. от середины вправо):

Чтобы наш блок "main" располагался посередине экрана, надо чтобы его середина совпадала с серединой тега "body". Т.е. надо сместить блок "main" влево на половину своего размера. Ширина блока "main" - 800 пикселов, значит надо задать ему свойство "margin-left:-400px". Да, это свойство может принимать отрицательные значения, тогда левое поле уменьшается (т.е. сдвигается влево). А именно это нам и нужно.

Теперь таблица стилей выглядит так:

body{ width:800px; padding-left:50%; } #main{ width:800px; margin-left:-400px; } #header{ background:#3e4982; width:800px; height:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; } #menu{ background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; } #content{ background:#ffffff; margin-left:200px; height:300px; text-align:center; } #footer{ background:#3e4982; clear:both; width:800px; height:50px; text-align:center; color:#FFFFFF; font-size:14px; padding-top:10px; }

А наша страница в браузере располагается ровно посередине:

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

Удачи Вам в ваших творческих поисках!

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

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

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

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

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

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

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

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

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

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

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

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

Начнем с основ выравнивания по вертикали 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 . Это гораздо лучше, чем любой другой вариант выравнивания текста по центру CSS по вертикали . С flexbox управление элементами напоминает детскую игру. Проблема состоит в том, что нужно отбросить некоторые браузеры, такие как IE9 и версии ниже. Вот пример того, как вертикально центрировать блок:

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

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

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

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

FlexBox Froggy

Песочница flexbox

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