Как выровнять элемент по вертикали css

Как выровнять элемент по вертикали внутри блочного элемента

Постановка задачи: необходимо задать вертикальное выравнивание для inline или inline-block элементов внутри блочного элемента.

Подходы к решению задачи. Существуют различные способы, рассмотрим основные из них:

1. Представить блочный элемент как ячейку таблицы ( display: table-cell ).
2. IE6-7: метод expression.
3. Приравнивание межстрочного интервала (свойство line-height ) и высоты блока (для однострочных элементов).
4. Позиционирование при помощи внешнего блока ( position:absolute ).

Ну а подведя итоги, рассмотрим еще один метод:

5. Выравнивание с помощью свойства vertical-align.

display: table-cell

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

   Вертикальное выравнивание. Способ display: table-cell .wrapper

Простота;
Выравнивает как одну, так и несколько строк.

Не работает в IE7 и ниже;
Без дополнительных конструкций сложно манипулировать горизонтальным положением внешнего блока;
Не всем нравится сам факт использования display: table-cell .

IE6-7: метод expression

Т.к. предыдущий способ не работает в IE6-7, то надо исправить эту неприятность.

Expression — короткие куски JS кода, которые помещаются в файл стилей, выполняются один раз и работают только в IE. Expression невалидны. Добавляем к предыдущему примеру в файлы стилей для IE6 и 7 такой кусок кода:

.wrapper p < z-index: expression( runtimeStyle.zIndex = 1, this == ((200/2)-parseInt(offsetHeight)/2) < 0 ? style.marginTop="0" : style.marginTop=(200/2)-(parseInt(offsetHeight)/2) +'px' ); >

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

line-height

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

   Вертикальное выравнивание. Способ line-height .wrapper

Простота;
Кроссбраузерность.

Подходит только для однострочных элементов;
Позволяет выравнивать только по центру.

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

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

   Вертикальное выравнивание. Способ line-height .wrapper < position: relative; height: 400px; >.wrapper p Я выровнен по вертикали

Кроссбраузерность;
Выравнивать элементы можно как по центру, так и в любом другом положении.

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

Итог по популярным методам

Как видно, данные методы не являются универсальными – каждый из них имеет пусть и небольшие, но недостатки. Наиболее универсальным оказывается метод display: table-cell , но он мне никогда не нравился, к тому же мы очень долго не отказывались от поддержки IE6-7. Поэтому появилась необходимость поработать над чем-то более универсальным. Рассмотрим Выравнивание при помощи vertical-align .

Выравнивание при помощи vertical-align

Как известно, свойство vertical-align не работает для блочных элементов, поэтому применять это свойства для них бесполезно. Однако, данное свойство прекрасно работает для inline и inline-block элементов. Если мы попробуем применить данное свойство для элементов внутри блочного элемента, то мы получим следующую картину:

   Вертикальное выравнивание. Способ vertical-align .wrapper < width:600px; height:100px; padding:30px; /* Добавлено для наглядности */ margin:0 auto; background:#dfdfdf; font-family:Arial, Helvetica, sans-serif; >.el1 < vertical-align:middle; font-size:28px; >.el2 < vertical-align:top; font-size:14px; >.el3 < vertical-align:middle; font-size:18px; >.el4 < vertical-align:middle; font-size:36px; >.el5

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

   Вертикальное выравнивание. Способ vertical-align .wrapper < width:600px; height:100px; padding:30px; /* Добавлено для наглядности */ margin:0 auto; background:#dfdfdf; font-family:Arial, Helvetica, sans-serif; >.el1 < vertical-align:middle; font-size:28px; >.el2 < vertical-align:top; font-size:14px; >.el3 < vertical-align:middle; font-size:18px; >.el4 < vertical-align:middle; font-size:36px; >.el5 < vertical-align:bottom; font-size:12px; >.spanvmiddle

Зададим для всех элементов vertical-align:middle .

Что ж, одну строку мы таким образом отцентрировали. А что, если надо несколько строк? И тут проблем нет. Надо лишь для текстовых элементов задать display:inline-block :

   Вертикальное выравнивание. Способ vertical-align .wrapper < width:600px; height:100px; padding:30px; /* Добавлено для наглядности */ margin:0 auto; background:#dfdfdf; font-family:Arial, Helvetica, sans-serif; >.wrapper span < display:inline-block; >.el1 < vertical-align:middle; font-size:28px; >.el2 < vertical-align:middle; font-size:11px; >.el3 < vertical-align:middle; font-size:18px; >.el4 < vertical-align:middle; font-size:32px; >.el5 < vertical-align:middle; font-size:11px; >.spanvmiddle   строками текста   с тремя 
строками текста

Если нам не важна совместимость со старыми версиями IE, то элемент мы можем удалить, а его стили заменить на:

.wrapper:after

Стоит отметить несколько моментов:

К элементам, которые выравниваются, нельзя применять свойство float .
Между соседними inline-block элементами всегда есть расстояние, поэтому если их надо прижать друг к другу, то для внешнего блока надо задать font-size:0px; а у самих элементов восстановить, задав нужное значение.
Для внутренних элементов таким образом можно задавать как одинаковые значения ( top , bottom или middle ), так и разные.

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

Приходится добавлять дополнительный элемент;
При использовании псевдоэлемента :after , теряется поддержка старыми версиями IE.

Советы по CSS, которые вы вряд ли найдете в самоучителях

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

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

Ниже изложено то, чему руководства по CSS меня не научили.

Свойство padding-top относительно ширины родительского элемента

Как часто вы использовали относительные единицы в CSS? Я их большой поклонник, потому что они позволяют создать адаптивный веб-сайт, не слишком углубляясь в медиазапросы. Если вы хотите установить высоту элемента в половину от высоты родителя, то достаточно просто написать height: 50% .

Вы можете использовать относительные единицы где угодно. Если хотите добавить расстояние между двумя вертикальными элементами, то можете написать margin-top: 15% и появится внешний отступ. Расстояние будет составлять 15% от исходной высоты. Я думаю, вы все это знаете, и не буду тратить ваше время. Но, возможно, вы не знаете, что все не так просто.

В некоторых ситуациях лучше использовать padding вместо margin. Но когда вы устанавливаете padding-top: 15% … Что за.

Свойство не работает так, как мы ожидаем. Оно не устанавливает параметры относительно высоты родителя. Что происходит?

Объяснение

Оно устанавливает параметры относительно родительской ширины. Вам нужна демонстрация? Вот:

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

Нет, я шучу — нет никаких объяснений, почему так происходит. По крайней мере, я нигде не смог найти объяснений. Просто так происходит, имейте это в виду.

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

.parent < height: auto; width: 100px; >.child

Тогда высота элемента будет такой же, как высота дочернего элемента, хотя мы задали height: auto . С другой стороны, высота дочернего элемента будет такой же, как и ширина родительского элемента, поскольку мы устанавливаем padding-top: 100% . В результате получается квадрат, и элемент будет поддерживать это соотношение при любых размерах.

Вот рабочий пример:

Если измените padding-top: 100% на любой другой процент, то получится прямоугольник. Если меняете ширину, то соотношение все равно сохраняется.

Трансформация может накапливать правила

Если вы изучали информатику, то наверняка помните эту ужасную черепаху и ее двигающуюся ручку. Эта образовательная концепция более известна как черепашья графика, цель которой состоит в том, чтобы провести черепаху по пути при помощи простых инструкций — «20 шагов вперед», «поворот на 90 градусов» и тому подобное.

Что, если бы используя CSS, вы могли задать команду перемещение на «20 пикселей вправо» относительно текущего положения элемента, а не его стартовой позиции? А если я скажу, что вы можете это сделать, используя свойство transform ?

Многие разработчики не знают, что свойство transform может накапливать правила и правило n+1 будет относиться к позиции, достигнутой в n-м правиле, а не к исходной позиции.

Вы растеряны? Возможно, этот пример поможет вам прийти в себя:

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

transform: translateX(20px);

А затем добавите следующее правило:

transform: translateX(20px) translateX(40px)

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

transform: rotateZ(20deg) translateX(30px)

будет отличаться от такой:

transform: translateX(30px) rotateZ(20deg)

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

transform: translateX(50vw) translateX(-300px)

Но если вы не собираетесь его анимировать, то, возможно, calc () — лучшая альтернатива.

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

К сожалению, она пока не рисует. Но, если захотите, всегда можете реализовать функцию рисования.

Внешние и внутренние отступы отсчитываются по часовой стрелке

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

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

Позвольте дать вам подсказку:
Отступы и границы следуют по часовой стрелке

Объясню проще. Вы с уверенностью можете использовать:

padding-top: 3px; padding-left: 6px; padding-right: 6px; padding-bottom: 3px;

Но точно так же вы можете использовать более короткую альтернативу:

padding: 3px 6px 3px 6px;

Порядок запомнить легко — просто посмотрите на эти часы:

Начинайте с 12:00 и продолжайте движение по часовой стрелке. Вы получите правильный порядок.

Если вместо этого вы используете только два значения:

padding: 2px 4px;

Браузер расширит его, повторив параметры:

padding: 2px 4px 2px 4px;

Если вы используете три значения:

padding: 2px 4px 6px;

Браузер будет использовать среднее значение как для левого, так и для правого края, как если бы вы написали:

padding: 2px 4px 6px 4px;

Фон поддерживает несколько изображений

Это одно из наименее известных свойств, хотя оно широко поддерживается.

Вы знаете, что можно указать URL-адрес изображения внутри свойства background , но, если необходимо, можете вставить столько изображений, сколько хотите. Все, что вам нужно сделать, это разделить их запятой:

background: url('first-image.jpeg') top left, url('second-image.jpeg') bottom right;

Почему это может быть полезно? Что вы думаете о Линусе Торвальдсе на фоне сгенерированного при помощи CSS восхода солнца?

Вы также можете сделать квадратным прямоугольное изображение, добавляя те затененные границы, которые так популярны в Instagram. Для этого я повторил одно и то же изображение дважды, увеличив фоновое изображение в 5 раз:

Обнаружение сенсорных устройств

Благодаря медиа-запросам мы можем сделать сайты гибкими, а макеты адаптировать к экранам различных размеров. Но этого недостаточно!

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

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

Вам не нужен сложный JavaScript-код для определения user-agent. Все необходимое есть в CSS:

@media (any-pointer: fine) < /* These rules will be applied to not-touchscreen devices */ >@media (any-pointer: coarse) < /* These rules will be applied to touchscreen devices only */ >

Подсказка: Для проверки вам не нужен смартфон, можете имитировать сенсорное устройство с помощью инструментов Google Chrome, просто щелкнув этот значок:

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

В конце концов, вы можете предусмотреть файл touchscreen.css и при необходимости его импортировать:

@import url('touchscreen.css') screen and (any-pointer: coarse);

Примечание: в настоящее время не поддерживается Firefox, как вы можете видеть на caniuse.com.

Отступы схлопываются

«И следите за лестницами. Они любят меняться» (Перси Уизли Гарри Поттеру)

Мне нравится CSS — это чистый, точный и элегантный язык, в нем есть все, что нужно разработчикам.

Вы применяете правило, и оно работает. Но когда я думал, что знаю все о CSS, произошло вот это:

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

Что это значит? Предположим, мы хотим создать такой макет:

Мы создали разметку для трех элементов и установили разную высоту верхней границы для каждого из них. Вроде бы все должно работать? Нет.

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

Результат будет выглядеть так:

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

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

поля вертикальны (с горизонтальными подобного не происходит);
внешние элементы не содержат текст или другой контент;
не установлены внутренние отступы или границы;
свойство display определено как «block»;
свойство overflow отличается от «initial»;
отступы не являются отрицательными.

Обратите внимание, что это может случиться и для элементов одного уровня. Если у вас есть два родственных элемента один над другим и вы устанавливаете margin-bottom: 30px для первого и margin-top: 60px для второго, то с наименьшим будут проблемы. Отступы в результате не будут равны 30 + 60 = 90 пикселей, а будут равны наибольшему значению (30, 60) = 60 пикселей.

Финальные размышления

На этом все! Надеюсь, я не зря тратил время на статью и она оказалась полезной для вас.

Заглядывайте на VPS.today — сайт для поиска виртуальных серверов. 1500 тарифов от 130 хостеров, удобный интерфейс и большое число критериев для поиска самого лучшего виртуального сервера.

Как прижать элемент к низу или верху родительского элемента

Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!

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

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

 #parent < background:black; height:300px; >#child Текст дочернего элемента

Для красоты и наглядности я сделал дочерний элемент квадратным:

Красный квадрат

Способ №1. Абсолютное позиционирование

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

  Текст дочернего элемента

абсолютное позиционирование

Это значит что в таком случае:

 #parent < background:black; height:300px; >#child,#child2,#child3< display:inline-block; /* Сделали все div в одну строку */ height:100px; width:100px; > #child < background:red; >#child2 < background:yellow; >#child3 Текст дочернего элемента 1
 Текст дочернего элемента 2
 Текст дочернего элемента 3

div в одну строку

После проделанного выше способа получиться следующее:

элементы друг на друге

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

Конечно, кто-то может поспорить и сказать, что мы можем выставить у каждого div разную велечину left, например так:

  Текст дочернего элемента 1
 Текст дочернего элемента 2
 Текст дочернего элемента 3

CSS свойство left

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

Но это ерунда, куда важнее универсальность и рациональность. Поясняю, пользуясь способом №1 мы должны:

Способ №2. Вертикальное выравнивание

Этот способ подойдёт в том случае, если, к примеру, у родителя не задана высота, в то время как все дочерние элементы имеют разные высоты:

 #parent < background:black; >#child,#child2,#child3 < display:inline-block; >#child < background:red; height:300px; width:100px; >#child2 < background:yellow; height:100px; width:100px; >#child3 Текст дочернего элемента 1
 Текст дочернего элемента 2
 Текст дочернего элемента 3

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

Всё что нужно, чтобы это исправить – дописать всего лишь одну строчку:

 #parent < background:black; >#child,#child2,#child3< vertical-align:bottom; /* вот она */ display:inline-block; > #child < background:red; height:300px; width:100px; >#child2 < background:yellow; height:100px; width:100px; >#child3 Текст дочернего элемента 1
 Текст дочернего элемента 2
 Текст дочернего элемента 3

vertical-align

1) Для того, чтобы применить вертикальное выравнивание (vertical-align), элементы ни в коем случае не должны иметь свойство float.
2) В отличие от предыдущего способа, нам без разницы, какую позицию (relative, absolute и тд.) будет иметь родитель, поэтому её можно просто не писать, по умолчанию она static.

Как прижать элементы к верху родительского

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

Такая необходимость может появиться, например, если у вас внутри дочерних элементов высота регулируется не в CSS, а объёмом текста:

 #parent < background:black; >#child,#child2,#child3 < width:100px; display:inline-block; >#child < background:red; >#child2 < background:yellow; >#child3 Много, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста. Текст дочернего элемента 1
 Мало текста, мало текста. Текст дочернего элемента 2
 Средне текста, средне текста, средне текста, средне текста, средне текста. Текст дочернего элемента 3

top

Чтобы это исправить, и прижать все элементы к верху родительского, нам необходимо задать свойство vertical-align в значение top:

 #parent < background:black; >#child,#child2,#child3< vertical-align:top; /* top */ width:100px; display:inline-block; > #child < background:red; >#child2 < background:yellow; >#child3 Много, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста. Текст дочернего элемента 1
 Мало текста, мало текста. Текст дочернего элемента 2
 Средне текста, средне текста, средне текста, средне текста, средне текста. Текст дочернего элемента 3

результат

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

Все способы вертикального выравнивания в CSS

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

Да, для вертикального выравнивания в 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

После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
http://jsfiddle.net/c1bgfffq/

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

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

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

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

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

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

.outer-wrapper < display: table; >.outer

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

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

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

.outer < height: 200px; >.inner

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

Выравнивание с помощью line-height

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

.outer < height: 200px; line-height: 200px; >.inner

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

.outer < height: 200px; line-height: 200px; >.inner

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

Выравнивание с помощью «растягивания»

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

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

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

.outer < position: relative; >.inner

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

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

Выравнивание с помощью отрицательного margin-top

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

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

.outer < position: relative; >.inner

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

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

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

.outer < position: relative; >.inner

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

Минус данного способа в ограниченной поддержке свойства transform старыми версиями браузера IE.

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

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

Суть способа в добавлении внутри внешнего блока строчного блока inline-block высотой в 100% и задания ему вертикального выравнивания. В этом случае высота добавленного блока будет равна высоте внешнего блока. Внутренний блок выровняется по вертикали относительно добавленного, а значит, и внешнего блока.

Чтобы не нарушать семантику, строчный блок рекомендуется добавить с помощью псевдоэлемента before или after .

.outer:before < display: inline-block; height: 100%; vertical-align: middle; content: ""; >.inner

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

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

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

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

.outer < display: flex; width: 200px; height: 200px; >.inner

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

Какой способ выбрать?

Нужно исходить из постановки задачи:

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