bootstrap 4, не получается центрировать блок

Question

Я делаю центрирование блока с помощью bootstrap. Вот код: <div class='row justify-content-center align-items-center'>asd</div>. В итоге по горизонтали по центру, а по вертикали в самом верху. Почему не отрабатывает align-items-center? Использую bootstrap 4.

Answer 1

Соответственно, если по горизонтали все гуд, тогда использовать Vertical alignment атрибуты Bootstrap 4:

align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, .align-text-top

Это сработает, если Ваш DIV не обернут еще каким либо тегом, который диктует ему другие стили.
И вот еще по этой теме как раз: тык

Answer 2

Разумеется, в самом верху - у row нет высоты, поэтому выравнивание по вертикали визуально никак не отображается. Если хотите увидеть выравнивание по вертикали, добавьте row высоту:

.row {
  margin: 0 !important;
  height: 100vh
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class='row justify-content-center align-items-center'>asd</div>

БЛОГ НА HUSL

bootstrap 4, не получается центрировать блок

Ответы (2 шт):