Очередная бородатая проблема с нормальным размещением контента на странице с использованием CSS. На этот раз было необходимо просто центрировать по вертикали один <div> внутри другого <div>'а. Совершенно простая задача, но решается через костыли (увы-увы, мой милый цсс, ты слишком идеален для нашего грязного мира).
Подходы которые не работают (и которые не следует даже пытаться реализовать):
Подходы которые не работают (и которые не следует даже пытаться реализовать):
- аналогично центрированию по горизонтали margin-top: auto; margin-bottom: auto;
- margin-top: 50%; даже при определенной высоте отца-контейнера приводит к каким-то рандомным скаканиям
- ставим у дива-отца position: relative; и не забываем задать его высоту.
- ставим у дива-сына position: absolute; и top: 50%;
да, тоже сталкивался. div в div именно так и ровнял.
ОтветитьУдалитьно почему это костыли? я так понял что в этом и есть всё отличие див-верстки от табличного хардкод олдскула. тут всё динамичненько на фреймах, игра absolute-relative.
В том смысле, что все работает так как и документировано, это не костыль.
ОтветитьУдалитьНо, согласись, решение весьма неочевидное. Отличается от центрирования по горизонтали. Да и честно говоря никаким центрированием не является. Нужно подгонять top и height чтобы было похоже что по центру. Если у меня скажем внутренний див имеет динамическую высоту, то этот метод не подойдет.