Как вертикально центрировать .div в Bootstrap?

Question

[dhat]

Как вертикально центрировать черный и желтый .div внутри красного? Не найду в Bootstrap как это делается. Нужно самому класс писать? Как это лучше всего сделать, чтоб не поломать ничего в Бутстрапе (наверняка есть какая-то лучшая практика)?

codepen.io/dhatt/pen/KgzoGx

Answer 1

[Cyber_bober]

codepen.io/cyberbober/pen/dprmAp

Comments

[dhat]

А зачем выставлять позишены и top, и добавлять минусовый margin-top, если с таким же успехом можно просто добавить один лишь margin-top: 100px???

[Cyber_bober]

dhat: потому что если я задам высоту блока в 600 px то при таких условиях моя верстка не поедет, а ваша, с margin-top:100px, поедет.

codepen.io/cyberbober/pen/dprmAp

[dhat]

Cyber_bober: Ну а если у блока вообще нету фиксированной высоты, то как быть? Как автоматически центрировать?

[dhat]

Cyber_bober: я понял что вы имеете ввиду, только мне неясно откуда вы взяли margin-top: -100px? Почему именно -100px?

[Cyber_bober]

dhat: потому что высота блока, который я центрирую - 200px) да, можно, способы вертикального центрирования в css это особый вид фетиша среди фронтенд разработчиков, загуглите и найдете уйму способов

[dhat]

Cyber_bober: хм, а если у внутреннего блока нету фиксированной высоты (например, там текстовый контент, который может менятся) - то что делать? Самое обидное, что Флексбокс ломает контейнер.

[Cyber_bober]

dhat: https://goo.gl/2KIRc6

[dhat]

Cyber_bober: ок, я думал для Бутстрапа есть лучший метод. Придется все тыкать наугад)))

[Cyber_bober]

dhat: вы зря начинаете работу с css с использования бутстрэп, он вам автоматизирует малую часть работы, но сути ее вы не понимаете, поэтому ваш css все равно не будет кошерным. Бутстрэп это фрэймворк и он не отменяет другие возможности CSS, а правильность тех или иных действий может определить только опыт, поэтому не заморачивайтесь в данном случае.

[dhat]

Cyber_bober: я не начинаю работу с CSS, я продолжаю. Просто до этого я сразу начал верстать на Флексбоксе - от всех этих флоатов и прочих хаков мне дурно)))

Answer 2

[Raz-Dva]

По моему вертикально через классы в bootstrap не выровняешь. Самому нужно задавать css .