Bootstrap 4 делает элементы центрированными по вертикали в классе с наклейками

Question

Я пытался добиться центрирования элементов в div с классом sticky-top, я использовал этот класс, но безуспешно:

d-flex justify-content-center align-items-center flex-column

body, html {
  height: 100%;
}

#element-1 {
  background: lightgray;
  height: 1000px;
  overflow: auto;
}

#element-2 {
  background: gray;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid h-100">
  <div class="row">
    <div class="col-8" id="element-1">
    Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content 
    </div>
    <div class="col-4" id="element-2">
      <div class="sticky-top">
        <div class="d-flex justify-content-center align-items-center flex-column">
          <div>I should be center vertically</div>
        </div>
      </div>
    </div>
  </div>
</div>

Поскольку вы видите элемент не по центру по вертикали, это то, что я хочу получить, и не хотите вставлять центрированные элементы, они должныбыть друг под другом.

Заранее спасибо

Редактировать: вот фотошоп версия моей цели:

Answer 1

Просто добавьте класс h-100 к липкой вершине и ее внутреннему div.

body, html {
  height: 100%;
}

#element-1 {
  background: lightgray;
  overflow: auto;
}

#element-2 {
  background: gray;
}

<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-fluid h-100">
  <div class="row">
    <div class="col-8" id="element-1">
    Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content 
    </div>
    <div class="col-4" id="element-2">
      <div class="sticky-top h-100">
        <div class="d-flex h-100 justify-content-center flex-column">
          <div class="text-center">I should be center vertically</div>
        </div>
      </div>
    </div>
  </div>
</div>

Вы также можете удалить внутренний div с липким верхом, если он вам не нужен:

body, html {
  height: 100%;
}

#element-1 {
  background: lightgray;
  overflow: auto;
}

#element-2 {
  background: gray;
}

<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-fluid h-100">
  <div class="row">
    <div class="col-8" id="element-1">
    Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content 
    </div>
    <div class="col-4" id="element-2">
      <div class="sticky-top d-flex h-100 justify-content-center flex-column">
          <div class="text-center">I should be center vertically</div>
      </div>
    </div>
  </div>
</div>

РЕДАКТ. 1 Извините, я не заметил проблемы с залипанием

Я использовал добавление второго решения:

.sticky-top{
  height:100vh;
}

body, html {
  height: 100%;
}

#element-1 {
  background: lightgray;
  height: 1000px;
  overflow: auto;
}

#element-2 {
  background: gray;
}
.sticky-top{
  height:100vh;
}

<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-fluid h-100">
  <div class="row">
    <div class="col-8" id="element-1">
    Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content 
    </div>
    <div class="col-4" id="element-2">
      <div class="sticky-top d-flex justify-content-center flex-column">
          <div class="text-center">I should be center vertically</div>
          <div class="text-center">I should be center vertically</div>
      </div>
    </div>
  </div>
</div>

Answer 2

Не уверен, что понимаю требования, но вы этого хотите?

body, html {
  height: 100%;
}

#element-1 {
  background: lightgray;
  height: 1000px;
  overflow: auto;
}

#element-2 {
  background: gray;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid h-100">
  <div class="row">
    <div class="col-8" id="element-1">
    Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content 
    </div>
    <div class="col-4" id="element-2">
      <div class="sticky-top">
        <div class="d-flex justify-content-center align-items-center">
          I should be in center
           </div>
          <div class="d-flex justify-content-center align-items-center">
          I should be in center too!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Примечание: единственное отличие, которое я сделал, было добавление текста в его собственный div

         <div class="d-flex justify-content-center align-items-center">
          I should be in center
         </div>
         <div class="d-flex justify-content-center align-items-center">
          I should be in center too!
         </div>