Как выровнять текст по вертикали?

Собственно простой вопрос - как выравнять текст по вертикали внутри блока div?
Все завалено ответами как выравнять текст внутри блока с заранее известной высотой. А как это сделать внутри блока с относительными размерами?

Простой пример:
<div>50</div>
div {
    width: 10%;
    background: gray;
    overflow: hidden;
    text-align: center;
    font-size: 2rem;
}

div:before {
    content: "";
    padding-top: 100%;
    float: left;
}


https://jsfiddle.net/z2vvpn9d/

Варианты с js не интересуют - я их и сам знаю.
  • Вопрос задан
  • 323 просмотра
Решения вопроса 1
Не слушай никого. Типичные вещи CSS Не знают.
div:before {
    content: "";
    padding-top: 100%;
    display: inline-block;
    vertical-align: middle;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Для родительского блока:
display:table;
Для вложенного блока:
display:table-cell; 
vertical-align:middle;
text-align:center;


Есть еще такая крутая вещь, как Flexbox, почитайте о ней.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы