Как найти вертикальное положение

При изучении стилизации HTML-страниц и механизмов выравнивания элементов средствами CSS, начинающий разработчик, как правило, сначала знакомится со способами горизонтального выравнивания элементов. В их числе, например, text-align: center; и margin: 0 auto;. С выравниванием по вертикали возникает больше вопросов. В этой статье разберем пять способов выравнивания элементов в HTML и CSS по вертикали.

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

1. У правила для горизонтального выравнивания текста text-align: center;, которое уже упоминалось выше, есть собрат, который называется vertical-align. Как и text-align, vertical-align выравнивает элементы со строчным или строчно-блочным типом бокса. Отличие в том, что свойство text-align применяется к родительскому блоку, а vertical-align необходимо применять непосредственно к выравниваемому элементу.

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

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

2. Для тех, кто не знаком с принципами работы интерлиньяжа и свойством line-height, может стать откровением, что текст располагается посередине содержащей его строки. Этим можно пользоваться при выравнивании. Предположим, что у вас есть элементарный footer, в котором нужно расположить по центру копирайт:

<div class="footer">
  <p class="footer__text">
    Copyright - ThriveTalk 2017
  </p>
</div>

Допустим, что высота футера равна 80px. Для того, чтобы текст вертикально встал ровно по центру, достаточно написать в CSS следующее:

.footer__text {
  line-height: 80px;
}

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

3. Для предотвращения нежелаемного поведения, описанного в примере выше, можно использовать метод выравнивания: padding. Значения padding-top и padding-bottom помогут вам не только центрировать по вертикали, но и застраховаться от переполнения. Рассмотрим пример:

<a class="link">
  <span>Заказать</span>
</a>

Предположим, вы верстаете кнопку, при нажатии на которую происходит переход на страницу заказа товара. Высота кнопки не должна превышать 50px. Из макета вы выгрузили следующие стили:

.button {
  font-size: 16px;
  line-height: 20px;
}

Высота контента внутри кнопки равна высоте строки и составляет 20px. Чтобы текст кнопки встал по центру, необходимо распределить по свойствам padding-top и padding-bottom оставшееся пространство следующим образом: (50px — 20px) / 2.

В результате получаем следующее:

.button {
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 16px;
  line-height: 20px;
}

Если текст кнопки измениться с «Заказать» на «Заказать товар онлайн» и перестанет помещаться на одной строке, кнопка сохранит нужный вид, а текст внутри неё по-прежнему будет находиться по центру.

Выравнивание при помощи padding универсально и подходит как для фразовых элементов, так и для выравнивания элементов с блочным типом бокса (но только в некоторых случаях).

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

У Flexbox есть ряд преимуществ перед обыкновенным выравниванием — в первую очередь это создание крупных сеточных структур и макросеток.

5. А что, если элемент абсолютно спозиционирован? Предположим, что вы сверстали модальное окно, которое нужно спозиционировать не относительно другого элемента, а относительно окна браузера. В этом случае можно использоватьposition: fixed;.

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

Положением спозиционированных элементов управляют свойства top, right, bottom, left. Попробуем следующее:

.modal-window {
  position: fixed;
  top: 50%;
  left: 50%;

  width: 300px;
  height: 200px;
}

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

.modal-window {
  position: fixed;
  top: 50%;
  left: 50%;

  width: 300px;
  height: 200px;
  margin-left: -150px;
  margin-top: -100px;
}

У применения свойства margin в этой ситуации существует один недостаток. При изменении свойств width и/или height модального окна вам придется вручную «подкручивать» значения отрицательного margin, чтобы добиться половины размера его ширины и высоты. Этого можно избежать, используя вместо margin свойство transform. А transform: translate(X, Y) позволяет регулировать смещение элемента относительно исходного положение. Например, так:

.modal-window {
  position: fixed;
  top: 50%;
  left: 50%;

  width: 300px;
  height: 200px;
  transform: translate(-50%, -50%);

В отличие от свойства margin, значения которого вычисляются от ширины родительского элемента, transform: translate(X, Y) берет за основу габариты самого элемента — в данном случае, модального окна. А это то, что нам и нужно. В результате, модальное окно будет всегда находиться в центре. Независимо от своих размеров.

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

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

Задача вертикального центрирования

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

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

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

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

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

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

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

Метод line-height

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

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

HTML:

<div id="parent">
	<div id="child">Нужный текст</div>
</div>

CSS:

#child {
	line-height: 200px; 
}

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

Центрирование изображения с помощью line-height

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

HTML:

<div id="parent">
	<img src="image.png" alt="" />
</div>

CSS:

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

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

Метод таблиц CSS

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

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

HTML:

<div id="parent">
	<div id="child">Содержание</div>
</div>

CSS:

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

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

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

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

Абсолютное позиционирование и отрицательные поля

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

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

HTML:

<div id="parent">
	<div id="child">Содержание</div>
</div>

CSS:

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

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

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

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

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

HTML:

<div id="parent">
	<div id="child">Содержание</div>
</div>

CSS:

#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 и ниже.

Равные отступы сверху и снизу

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

HTML:

<div id="parent">
	<div id="child">Содержание</div>
</div>

CSS:

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

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

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

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

150 + 150 + 100 = 400

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

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

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

Плавающий div

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

HTML:

<div id="parent">
	<div id="floater"></div>
	<div id="child">Содержание</div>
</div>

CSS:

#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 и знаний о высоте вложенного элемента.

Заключение

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

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

Установка теодолита в рабочее положение

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

Центрирование теодолита — это проецирование оси вращения алидады и лимба по отвесной линии на вершину определяемого угла с точностью для механического отвеса ± 5 мм, ± 1-2 мм для оптического отвеса. Сначала проводится центрирование штатива с помощью механического отвеса с точностью 10-15 мм. При этом необходимо установить штатив горизонтально, чтобы регулировка подъемных винтов позволила произвести горизонтирование прибора. При установке прибора на штатив, производим окончательное центрирование теодолита, передвигаем оптический теодолит, ослабив становой винт.

Горизонтирование теодолита – это последовательное горизонтирование плоскости лимба горизонтального угломерного круга (ГУК) и приведение вертикальной оси вращения в отвесное положение. Процесс горизонтирования контролируется по цилиндрическому уровню алидады ГУК и производится посредством подъёмных винтов теодолита. Поворачивая алидаду, направляют ось уровня по двум подъёмным винтам и перемещают пузырёк уровня в центр. Затем следует повернуть алидаду на 90° и, используя третий подъёмный винт, вновь перевести пузырёк в центр. Действия необходимо повторять до тех пор, пока пузырек не станет сходить с середины при всех позициях алидады горизонтального круга. Допустимое его отклонение не больше двух делений шкалы цилиндрического уровня.

Для получения достоверного результата работа с теодолитом требует соблюдения двух геометрических условий:

1. ось вращения прибора находится в вертикальном положении;
2. ось цилиндрического уровня — в горизонтальном положении.

Измерение горизонтального угла теодолитом
Визирование

Визирование – совмещение центра сетки нитей с точкой.

Сетка нитей – это стеклянная пластина с нанесёнными на нём линиями (характер их нанесения может быть разным). Пересечение средних линий называют центром сетки нитей Z.

Наведение центра нитей на точку

Для визирования теодолита на точку необходимо:

1. Закрепить лимб.
2. Открепить алидаду для того, чтобы по грубому визиру, расположенному наверху зрительной трубы, установить прибор примерно на искомую точку.
3. Закрепить алидаду.
4. Для наблюдения установить зрительную трубу так, чтобы сетка нитей имела резкое изображение. Эта операция называется установкой по глазу и производится вращением окулярного колена.
5. Установить зрительную трубу так, чтобы точка визирования была видна наилучшим образом. Эта операция называется установкой по предмету и производится вращением кремальеры.
6. Навести центр сетки нитей точно на точку визирования посредством наводящих винтов алидады и зрительной трубы. Если вертикальный круг оказывается с правой стороны от трубы, если смотреть со стороны окуляра, говорят «круг право» (КП). Если вертикальный круг оказался слева – «круг лево» (КЛ).

Измерение горизонтального угла β

Измерение горизонтального угла теодолитом предполагает установку прибора в вершине измеряемого горизонтального угла (т.н. станция), а рейки на станциях n+1 и n–1.

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

Затем выполняют следующую последовательность действий (первый полуприём):

1. наводят центр сетки нитей на вершину заднего (правого) угла  (n – 1) и снимают отсчёт по лимбу горизонтального круга — отсчёт а1;
2. наводят на вершину переднего (левого) угла (n + 1) снимают отсчет а2;
3. определяют значение угла при круге лево βкл=а1-а2.

Измерение горизонтального угла на станции n:
β – горизонтальный угол

До начала второго полуприёма (КП) разблокируют зрительную трубу и переводят через положение зенита. Затем разблокируют алидаду и поворачивают прибор на 180° , проводят измерения при КП. При втором полуприёме (КП) визирование и измерения производят аналогично, различия в значениях угла в двух полуприёмах (С) не должно превышать двойной точности прибора (t): С < 2t.

Измерение горизонтального угла β на станции n (КЛ):
n – станция
n–1 –- вершина заднего угла
n+1 – вершина переднего угла
а1 – отсчёт на вершину заднего угла
а2 – отсчёт на вершину переднего угла

Вычисление горизонтальных углов

При выполнении условия расхождения в значениях угла, полученных за два полуприёма, средний горизонтальный угол рассчитывают по формуле: βср = (βКЛ + βКП) /2.

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

Отсчёт по горизонтальному кругу берут следующим образом:

• считывают по шкале алидады количество градусов отсчётного штриха (по рисунку – 125°);
• считывают минуты слева направо от нуля, учитывая, что цена деления на шкале ГУ – 5´ (по рисунку – 07´).

 Отсчётный микроскоп теодолита RGK TO-15:
отсчёт по ГУК – «125°07´»
отсчёт по ВУК – «-0°35´»

Измерение вертикального угла теодолитом

Измеренный угол наклона может иметь как положительное, так и отрицательное значение, изменяясь от -90° до 90°.

Работа с теодолитом требует  проводить горизонтирование алидады каждый раз при отсчёте. Горизонтальным считается положение, когда пузырёк цилиндрического уровня алидады или трубы расположен посередине ампулы. Однако, даже при нахождении пузырька в центре ампулы линия нулей отсчётного устройства может находиться под небольшим углом по отношению к линии горизонта, который называется место нуля вертикального круга (М0). Важной чертой измерения вертикальных углов является необходимость учёта места нуля вертикального круга. Для этого при создании съёмочного обоснования снимают отсчёты по вертикальному угломерному кругу (ВУК) при КЛ и КП, а при тахеометрической съёмке — на каждой станции перед началом работы определяют место нуля.

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

Сначала снимают отсчёт, визируя при круге лево. Затем, переведя трубу через зенит, визируют и снимают отсчёт при круге права.

Существует несколько способов оцифровки лимба вертикального угломерного круга (ВУК). У теодолита RGK TO-15 (TO-05) оцифровка секторная, при которой ВУК разбит на 4 сектора по 90°, из которых два сектора имеют положительную оцифровку, а два других – отрицательную. Для взятия отсчёта:

• считывают количество градусов отсчётного штриха (по рисунку – «-0°»);
• считывают минуты – если вверху стоит «-0» – по отрицательной шкале от нуля до отсчётного штриха, если вверху стоит «+0» – по положительной шкале от нуля до отсчётного штриха (по рисунку – «-35?»).

Далее проводят вычисление вертикального угла. При этом отсчёты от 0° до 90° соответствуют измеряемому положительному вертикальному углу.

Вычисление вертикальных углов

После снятия отсчётов рассчитывают вертикальный угол через М0, либо по результатам двух отсчётов, полученных при визировании на цель в двух положениях зрительной трубы (КЛ и КП).

Расчётные формулы для секторной оцифровке лимба вертикального круга от нуля в обе стороны – по ходу и против хода часовой стрелки (RGK TO-05 и TO-15):

М0 = (КП + КЛ)/2; v = МО-КП; ν=КЛ−М0

При расчёте по этим формулам не обязательно добавлять 360°.

Измерение расстояний теодолитом

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

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

D = K*n =100*n

В случае, приведенном на рисунке:

• отчет по верхнему дальномерному штриху – 1747 мм;
• отчет по нижнему дальномерному штриху – 1856 мм.

Дальномерный интервал n равен разности отчетов по нижнему и верхнему дальномерным штрихам.

n = 1856-1747=109 мм = 10,9 см.

По формуле вычисляем расстояние: D = 100*10,9 см=1090 см = 10,9 м

Для измерения теодолитом расстояний при помощи нитяного дальномера относительная ошибка обычно составляет от 1/100 до 1/300.

Время на прочтение
6 мин

Количество просмотров 700K

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

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

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

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

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

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

<div class="outer">
    <div class="inner"></div>
</div>

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

Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны. Добавим внутреннему элементу правило 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) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.

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

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

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

<table class="outer-wrapper">
    <td class="outer">
        <div class="inner"></div>
    </td>
</table>

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

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

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

<div class="outer-wrapper">
    <div class="outer">
        <div class="inner"></div>
    </div>
</div>

.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/

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

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

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

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

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

.outer {
    position: relative;
}

.inner {
    height: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

http://jsfiddle.net/c1bgfffq/4/

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

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height

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

Выравнивание с помощью отрицательного 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.

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

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

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

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

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

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

.inner {
    display: inline-block;
    vertical-align: middle;
}

http://jsfiddle.net/c1bgfffq/10/

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

Выравнивание с помощью 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.