Вирівняти текст по центру блока

Дуже часто виникає потреба вирівняти текст по центру, цим задовбують і дизайнери і замовники. Така проста задача деколи буває досить серйозною проблемою. Особливо вирівнювання тексту вертикально. Отже які способи рівняння тексту бувають.

Перший спосіб це коли батьківському елементу задаються параметри:
display: table;
А вже елементу-нащадку:
display: table-cell;
text-align: center;
vertical-align: middle;

Другий спосіб полягає у абсолютному позиціонуванні:

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

}
Можна використати абсолютне позиціонування та розтягування:

#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;

}

А от якщо Ви знаєте, що у вас буде текст, який вміщується в рядок (Наприклад: пункт меню). То можна використати отакий не стандартний метод вертикального рівняння через псевдо-елемент:

div::before {

content: '';

display: inline-block;

min-height: inherit;

height: 100%;

vertical-align: middle;

}

Ну от наче всі основні типи перелічені. Далі лишилося лише комбінувати і підбирати, те що конкретно пасує у Вашому випадку.