## 1. Использование `line-height`
Подходит **только для однострочного текста** внутри блока. Высота блока и `line‑height` должны совпадать.
Код
<div class="parent">
<div class="child">Текст</div>
</div>
<div class="child">Текст</div>
</div>
Код
<style>.parent {
height: 100px;
line-height: 100px; /* равна высоте родителя */
}
.child {
text-align: center; /* для горизонтального центрирования */
}</style>
height: 100px;
line-height: 100px; /* равна высоте родителя */
}
.child {
text-align: center; /* для горизонтального центрирования */
}</style>
**Минусы:** при переносе текста на несколько строк выравнивание ломается.
## 2. Использование Flexbox
Самый популярный и надёжный способ.
Код
<div class="parent">
<div class="child">Блок с текстом</div>
</div>
<div class="child">Блок с текстом</div>
</div>
Код
<style>.parent {
height: 100px;
display: flex;
align-items: center; /* вертикальное центрирование */
/* для горизонтального + вертикального: */
justify-content: center;
}</style>
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>
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>/code]
[b]## 4. Использование позиционирования[/b]
[i]Классический способ, который работает даже в старых браузерах.[/i]
[code]<style>.parent {
height: 100px;
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%); /* сдвигает элемент вверх на половину его высоты */
}</style>
height: 100px;
display: grid;
}
.child {
margin: auto;
}[</style>/code]
[b]## 4. Использование позиционирования[/b]
[i]Классический способ, который работает даже в старых браузерах.[/i]
[code]<style>.parent {
height: 100px;
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%); /* сдвигает элемент вверх на половину его высоты */
}</style>
Для **полного центрирования** (по горизонтали и вертикали) добавьте:
Код
left: 50%;
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
**Варианты без `transform` (требуют знания размеров):**
**Отрицательный `margin`**: установите `margin-top` равным половине высоты дочернего блока.
**Ячейка таблицы**: задайте родителю display: table-cell и vertical-align: middle. Менее гибкий способ.
