Vertically center div when smaller than browser height (Bootstrap)

I am using CSS bootstrap 4 with multiple columns per row inside of a container. Depending on the screen size, those columns can stack on top of each other and make the container much taller and sometimes goes beyond what can be displayed on screen and requires scrolling. I cannot seem to figure out a way so that both of these conditions are met:

• If the container is shorter than the browser window height, center the container in the middle of the screen
• If the container is taller than the browser window height, do not center the container (so that it does not go off screen)

I have the code to center the container below, but when the number of lines of text becomes taller than the screen, it simply goes off screen due to .centered, and cannot be scrolled like a normal page

Here is my 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>

And my 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);
}