I am using CSS bootstrap 4 with multiple columns per row inside of a container.
(我正在使用CSS引导程序4，容器内每行有多列。)
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:
(这是我的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:
(而我的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);
}
