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

Question

[Александр Маджугин]

Собственно простой вопрос - как выравнять текст по вертикали внутри блока 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 не интересуют - я их и сам знаю.

Answer 1

[Abdula Magomedov]

Не слушай никого. Типичные вещи CSS Не знают.

div:before {
    content: "";
    padding-top: 100%;
    display: inline-block;
    vertical-align: middle;
}

Comments

[Александр Маджугин]

Я так и не понял почему это работает... Но это работает! Спасибо!

Answer 2

[Алексей Скляров]

Для родительского блока:
display:table;
Для вложенного блока:

display:table-cell; 
vertical-align:middle;
text-align:center;

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

Comments

[Александр Маджугин]

Не сработает.
Это квадрат и если в него положить блок что-то не инлайновое он перестанет быть квадратом (((

[Алексей Скляров]

Александр Маджугин: тогда flexbox - для вас

[Александр Маджугин]

Эти квадраты, в которых нужно такое выравниваение - они сами во флексбоксах.
Т.е. да - я знаю что внутри него можно замутить структуру еще из N вложенных блоков, но хотелось бы обойтись без ненужных сущностей.