I'm currently utilizing CSS bootstrap 4 to create a layout with multiple columns per row inside a container. Depending on the screen size, these columns may stack on top of each other, causing the container to become taller and sometimes exceed the visible area, requiring scrolling. I'm trying to find a solution that addresses both of the following scenarios:
- If the container is shorter than the browser window height, center it in the middle of the screen
- If the container is taller than the browser window height, do not center it (to prevent it from going off-screen)
While I have code to center the container, when the content exceeds the screen height, it simply extends beyond the view and cannot be scrolled like a regular page.
Here's my HTML structure:
<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>
<!-- Add more lines here if needed -->
</div>
</div>
</div>
And this is my CSS styling:
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);
}