Почему блоки не выравниваются вертикально по середине?

Question

[Алексей Верховцев]

Всем привет, смотрите, есть блок (неизвестно какой высоты, да и не столь важно), ему задано свойство position: relative; В нём есть блок с фиксированной высотой 96px, данному блоку задано свойство position: absolute; top: 50%; margin-top: -48px; Я ожидаю выравнивание вертикально по середине, но этого не происходит, раньше, насколько помню всё выравнивалось...

Answer 1

[gleendo]

1. https://jsfiddle.net/evg_/xcr6yhqa/
2. https://jsfiddle.net/evg_/aarf7x64/1/
3. https://jsfiddle.net/evg_/1p5tcsu1/1/
4. https://jsfiddle.net/evg_/5qL3f3vg/1/

Answer 2

[Junior]

Блоку с absolute дайте
margin: auto;
top:0;
bottom: 0;
вместо top: 50%; margin-top: -48px;

Answer 3

[Dmitry]

Я бы использовал для вложенного блока
.class {
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
transform: translateY(-50%);
}
Это позволит выровнять по центру блок любой высоты и ширины.