Vertically center div when smaller than browser height (Bootstrap)

Question

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

Answer 1

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

Answer 2

I'm sure this will solve your problem (I used only CSS), you can add text lines between the first and last one to test my solution:

 *{ box-sizing: border-box; } body { /* improtant lines */ display: grid; align-items: center; min-height: 100vh; overflow-y: auto; /* improtant lines */ background-color: rgb(0, 0, 0); margin: 0; } .centered { /* improtant lines */ display: grid; align-items: start; /* improtant lines */ padding: 1em 2em; } #main { background-color: rgb(30,29,38.3); border-radius: 6px; box-shadow: 0 0 30px rgb(25, 25, 35); color: white; padding: 1em; }

 <div class="centered"> <div id="main"> First Text<br> Text<br> Text<br> Text<br> Text<br> Text<br> Text<br> Last Text<br> </div> </div>

Explanation: I added a grid display to the body and made its children centered vertically then added a grid display to the ".centered" element itself and aligned its items at the start vertically.

Answer 3

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