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

Question

[Андрей Котосин]

Здравствуйте. Появилась задача сделать блок по середине окна, как вертикально, так и горизонтально. Хоть убей, не могу понять как центрировать относительно окна. Может кто то подскажет как это сделать в bootstrap 4?

Сейчас вот так:


А надо сделать вот так:


При этом нужно сделать как то, что бы не зависимо от ширины и высоты окна браузера блок всегда оставался по центру (желательно и при ресайзе что бы тоже)

Answer 1

[profesor08]

А ты его флексами, флексами!

.block-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

jsfiddle.net/0vpb74c2/2

У бутстрапа для этого даже классы есть: d-flex, align-items-center, justify-content-center, приписки sm, md, lg, xl, тоже есть.

Comments

[Андрей Котосин]

Спасибо. Разобраться просто с флексами не мог)

Answer 2

[Алексей Колосов]

Вот тут описано как установить вертикальное положение Vertical Align
А вот это скорее всего еще понадобится, чтобы положение всегда оставалось одинаковым при изменений размера Position