Не работает позиционирование элемента в bootstrap4

Question

Всем привет. Делаю учебный проект на react. Для верстки использую bootstrap4. Внутри элемента .container находиться единственный row с классом .content. С помощью класса align-items-center не получается поставить элемент в середину по вертикальной оси, элемент остается на месте, в чем может быть ошибка?

<div className='app'>
<div className='container'>
  <div className="row align-items-center justify-content-center content">
    <div className="col-7 col-content">
      <Switch>
        <Route path={'/'} exact component={Calc} />
        <Route path={'/notebook'} component={Note} />
      </Switch>
    </div>
  </div>
</div>

.app {
    height: 100vh;
    width: 100%;
    background-color: #93e1ed;
    }

.container {
    height: 100vh;
}

.content {
    .col-content {
        background-color: #fff;
        min-width: 900px;
        border-radius: $br-radius;

        .main-content {
            height: 415px;
        }
    }
}

Answer 1

Возможно я чего-то не понимаю,но в HTML что-бы задать класс используется

<div class='classname'></div>

Answer 2

Потому что у row с классом .content нет высоты. Вы задали height: 100vh контейнеру, а выровнять по вертикали пытаетесь элемент внутри row. Но высота row равна высоте внутреннего элемента, поэтому никакой реакции на align-items-center быть не может.

Вот если Вы зададите высоту row, тогда всё будет работать:

.app {
    height: 100vh;
    width: 100%;
    background-color: #93e1ed;
    }
    .content {
      border: 1px solid red;
      height: 100vh;
    }
.container {
    height: 100vh;
}
.col-content {
  background-color: #fff;
  min-width: 900px;
  border-radius: $br-radius;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class='app'>
  <div class='container'>
    <div class="row align-items-center justify-content-center content">
      <div class="col-7 col-content">
        Какой-то контент
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Не работает позиционирование элемента в bootstrap4

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