Вертикальный центр Div, когда он меньше высоты браузера (Bootstrap)

Question

Я использую загрузчик CSS 4 с несколькими столбцами в строке внутри контейнера. В зависимости от размера экрана эти столбцы могут накладываться друг на друга и делать контейнер намного выше, а иногда выходить за рамки того, что может отображаться на экране, и требует прокрутки. Кажется, я не могу найти способ, чтобы оба эти условия были выполнены:

• Если контейнер короче высоты окна браузера, отцентрируйте контейнер в центре экрана
• Если контейнер выше высоты окна браузера, не центрируйте контейнер (чтобы он не исчезал с экрана)

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

Вот мой HTML:

<div class="container centered" style="width: 100%">
    <div class="row justify-content-center">
            <div class="col-8" id="main">
                Text<br>
                Text<br>
                Text<br>
                <!-- Any number of more lines may be added here -->
            </div>
    </div>
</div>

Имой CSS:

html,
body {
  width: 100%;
}

body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: rgb(0, 0, 0);
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#main {
  background-color: rgb(30,29,38.3);
  border-radius: 6px;
  box-shadow: 0 0 30px rgb(25, 25, 35);
}