Как выровнять текст или блок div по вертикали | CSS

• padding или margin
• line-height = height
• Вертикальное выравнивание иконок и смайликов
• display: table-cell; и vertical-align: middle;
• vertical-align и :before
• position: absolute; (или position: fixed;) и картинки
• position: absolute; (или position: fixed;) и отрицательный margin
• position: absolute; (или position: fixed;) и transform: translate
• display: flex; и margin: auto;
• Как выровнять блок по центру ширины
• Выровнять HTML-элемент по ширине

padding или margin

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

какой-то текст

<style>
.vyrovnyat {
  background: #fff5d7;
  padding: 3em 0;
  text-align: center; /* выровнять текст и картинки по горизонтали */
}
</style>

<div class="vyrovnyat"> какой-то текст </div>

line-height = height

Если высоту строки (свойство line-height) сделать равной высоте блока (свойство height), то вложенный элемент разместиться по центру.

выровнять однострочный текст по вертикали

<style>
.vyrovnyat {
  background: #fff5d7;
  overflow: hidden; /* всё, что выходит за рамки блока обрезается */
  white-space: nowrap; /* блок может содержать не более одной строки */
  text-align: center;
  height: 7em;  /* не в % */
  line-height: 7em; /* не поддерживается Opera Mini [opera.com] */
}
</style>

<div class="vyrovnyat"> выровнять однострочный текст по вертикали </div>

Может быть применён не только для единственной строки (см. код).

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

Какой-то текст какой-то текст

<style>
.vyrovnyat {
  height: 7em;
  background: #fff5d7;
}
.vyrovnyat img {
  vertical-align: middle; /* подробнее про свойство vertical-align */
}
</style>

<div class="vyrovnyat"> 
  Какой-то текст <img src="адрес_изображения" alt=""> какой-то текст
</div>

display: table-cell; и vertical-align: middle;

какой-то текст

первая строка
вторая строка

какой-то текст

<style>
.vyrovnyat {
  display: table;
  width: 100%;
  height: 7em; /* работает также как min-height, то есть будет растягиваться пока не поместится всё содержимое */
  text-align: center;
  background: #fff5d7;
}
.vyrovnyat div { /* для IE8+ */
  display: table-cell;
  vertical-align: middle;
}
.vyrovnyat div:nth-child(2) { /* не менее высоты родителя */
  background: #9F9;
}
</style>

<div class="vyrovnyat">
  <div>какой-то текст</div>
  <div>первая строка<br>вторая строка</div>
  <div>какой-то текст</div>
</div>

vertical-align и :before

Не вижу ограничений по использованию.

первая строка
вторая строка

<style>
.vyrovnyat {
  height: 7em; /* можно заменить на min-height */
  text-align: center;
  background: #fff5d7;
}
.vyrovnyat div {
  display: inline-block;
  vertical-align: middle;
  background: #9F9;
}
.vyrovnyat:before { /* для IE8+ */
  content: "";
  display: inline-block;
  min-height: inherit;
  height: 100%;
  vertical-align: middle;
}
</style>

<div class="vyrovnyat">
  <div>первая строка<br>вторая строка</div>
</div>

position: absolute; (или position: fixed;) и картинки

<style>
.vyrovnyat {
  position: relative;
  height: 7em;
  background: #fff5d7;
}
.vyrovnyat img { /* для IE8+ */
  position: absolute;  /* подробнее про position: absolute; */
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}
</style>

<div class="vyrovnyat"> 
  <img src="адрес_изображения" alt="">
</div>

Можно применять и для выравнивания вложенных блоков, но у них должны быть указаны width и height.

position: absolute; (или position: fixed;) и отрицательный margin

первая строка
вторая строка

<style>
.vyrovnyat {
  position: relative;
  height: 7em;
  background: #fff5d7;
}
.vyrovnyat div {
  position: absolute;
  width: 60%;
  left: 20%;  /* если width в %, то разместить блок по центру ширины: (100% - 60%)/2 */
  height: 4em;
  top: 50%;  /* если значение height фиксированное, то следует расположить верхний край блока по середине высоты родителя */
  margin-top: -2em; /* и поднять на половину высоты потомка: 4em/2 */
  background: #9F9;
}
</style>

<div class="vyrovnyat"> 
  <div>первая строка<br>вторая строка</div>
</div>

position: absolute; (или position: fixed;) и transform: translate

первая строка
вторая строка

<style>
.vyrovnyat {
  position: relative;
  height: 7em;
  background: #fff5d7;
}
.vyrovnyat div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* сместить вверх и влево на половину высоты и ширины элемента. Для IE9+, для ряда браузеров нужны префиксы. Подробнее про свойство transform */
  background: #9F9;
}
</style>

<div class="vyrovnyat"> 
  <div>первая строка<br>вторая строка</div>
</div>

display: flex; и margin: auto;

первая строка
вторая строка

<style>
.vyrovnyat {
  display: flex; /* для IE10+, для ряда браузеров нужны префиксы */
  height: 7em;  /* можно заменить на min-height */
  background: #fff5d7;
}
.vyrovnyat div {
  margin: auto;
  background: #9F9;
}

/* или так */

.vyrovnyat {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 7em;
  background: #fff5d7;
}
.vyrovnyat div {
  background: #9F9;
}

</style>

<div class="vyrovnyat"> 
  <div>первая строка<br>вторая строка</div>
</div>