Почему не работает top в процентах?

Question

[Demigodd]

Ссылка на JSFiddle

Нужно скинуть синий бок в центр (block-content).
Но беда в том что top: 50% не работает.

Если блоку поставить position: absolute то сработает, только блок уже выходит за границы.

Как грамотно скинуть block-content в центр? Желательно без flexbox.

Answer 1

[approximate solution]

Если блоку поставить position: absolute то сработает, только блок уже выходит за границы.

Всё правильно, вы просто говнокодите на CSS, особенно используя везде vh и vw. Слышали поговорку "Заставь фронтендера размеры с помощью относительных единиц задавать везде, так он себе голову разобьет о jsfiddle"?
Добавьте нормальные размеры для block-content, и центрируйте как душе угодно, если что - top\left только для absolute.

Comments

[Demigodd]

approximate solution
Спасибо за ответ, а можно документацию на эту строчку ?

top\left только для absolute

[approximate solution]

DEATH2298, не слушайте старика) он тупит на работе.
relative работает с top и тд и тп. Если вы пропишите в пикселях, всё сместиться(можете попробовать задать top:20px к примеру), если вы хотите что бы работало в процентах то -
Проценты по вертикали работают только если высота родителя четко задана в абсолютных единицах длины или же высота известна из абсолютного позиционирования.

Но суть не меняется, не увлекайтесь с относительными единицами измерения, это мазохизм, и предназначено это совсем для других целей.