Разберу каждый из способов выровнять блок `div` по центру высоты — с примерами кода.

## 1. Использование `line-height`

Подходит **только для однострочного текста** внутри блока. Высота блока и `line‑height` должны совпадать.

Код
<div class="parent">  
<div class="child">Текст</div>  
  </div>
<style>.parent {  
height: 100px;  
line-height: 100px; /* равна высоте родителя */  
  }  

  .child {  
text-align: center; /* для горизонтального центрирования */  
  }</style>


**Минусы:**
при переносе текста на несколько строк выравнивание ломается.

## 2. Использование Flexbox
Самый популярный и надёжный способ.

Код
<div class="parent">  
<div class="child">Блок с текстом</div>  
  </div>
<style>.parent {  
height: 100px;  
display: flex;  
align-items: center; /* вертикальное центрирование */  
/* для горизонтального + вертикального: */  
justify-content: center;  
  }</style>


**Плюсы:**
* работает с любым количеством контента;
* не требует знания высоты дочернего элемента;
* поддерживается всеми современными браузерами.

## 3. Использование Grid
Аналогичен Flexbox по простоте и надёжности.

Код
<style>.parent {  
height: 100px;  
display: grid;  
align-items: center; /* вертикальное */  
justify-items: center; /* горизонтальное */  
/* или одной строкой: */  
place-items: center;  
  }</style>


Альтернативный вариант через `margin: auto` (работает, только если в контейнере один элемент):

Код
<style>.parent {  
height: 100px;  
display: grid;  
  }  
  .child {  
margin: auto;  
  }</style>


## 4. Использование позиционирования
Классический способ, который работает даже в старых браузерах.

Код
<style>.parent {  
height: 100px;  
position: relative;  
  }  

  .child {  
position: absolute;  
top: 50%;  
transform: translateY(-50%); /* сдвигает элемент вверх на половину его высоты */  
  }</style>


Для **полного центрирования** (по горизонтали и вертикали) добавьте:

Код
left: 50%;  
transform: translate(-50%, -50%);


**Варианты без `transform` (требуют знания размеров):**

**Отрицательный `margin`**: установите `margin-top` равным половине высоты дочернего блока.

**Ячейка таблицы**:
задайте родителю display: table-cell и vertical-align: middle. Менее гибкий способ.