Почему мои div не центрируются в родительском ряду при использовании начальной загрузки?

Question

Так что я пытаюсь центрировать мои зеленые div по вертикали, которые относятся к классу myCol, используя align-items-center на родительском row, но это не центрирует его, и я понятия не имею, почему.

Почему он так себя ведет?

.myRow {
    height: 30vh;
    border: orange dotted 2px;
}

.myCell {
    width: 100px;
    height: 100px;
    background: green;
    border: blue dotted 3px;
}

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
        <div class="container">

            <div class="row align-items-center myRow">
                <div class="col-3 myCell">

                </div>
            </div>

            <div class="row myRow">
                <div class="col-4 myCell">

                </div>

            </div>

        </div>

Answer 1

Вы используете загрузочную версию 2, но класс align-items-center появляется в загрузочной версии 4. Замените ваш HTML-код на:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">

    <div class="row align-items-center myRow">
        <div class="col-3 myCell">

        </div>
    </div>

    <div class="row myRow">
        <div class="col-4 myCell">

        </div>

    </div>

</div>

Answer 2

Проблема с вашим кодом в том, что вы используете Bootstrap версии 2, тогда как вы должны использовать Bootstrap версии 4.

Просто замените ссылки на скрипт начальной загрузки и файл css, и он должен работать.

Answer 3

В версии начальной загрузки 2 align-items-center класс не существует, поэтому попробуйте использовать последнюю версию начальной загрузки, чтобы получить решение

.myRow {
    height: 200px; /*30vh*/
    border: orange dotted 2px;
}

.myCell {
    width: 100px;
    height: 100px;
    background: green;
    border: blue dotted 3px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
        <div class="container">

            <div class="row align-items-center myRow">
                <div class="col-3 myCell">

                </div>
            </div>

            <div class="row myRow">
                <div class="col-4 myCell">

                </div>

            </div>

        </div>

или, если вы хотите использовать bootstrap 2, добавьте следующий стиль в ваш css

.align-items-center{
       display: -webkit-flex; /* Safari */
      -webkit-align-items: center; /* Safari 7.0+ */
      display: flex;
      align-items: center;
      }

.myRow {
    height: 200px;/*30vh;*/
    border: orange dotted 2px;
}

.myCell {
    width: 100px;
    height: 100px;
    background: green;
    border: blue dotted 3px;
}

.align-items-center{
   display: -webkit-flex; /* Safari */
  -webkit-align-items: center; /* Safari 7.0+ */
  display: flex;
  align-items: center;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
        <div class="container">

            <div class="row align-items-center myRow">
                <div class="col-3 myCell">

                </div>
            </div>

            <div class="row myRow">
                <div class="col-4 myCell">

                </div>

            </div>

        </div>