我正在使用CSS引导程序4，容器内每行有多列。根据屏幕大小，这些列可以彼此堆叠，并使容器更高，有时甚至超出屏幕上显示的内容，需要滚动。我似乎无法找出一种方法来满足这两个条件：
我有将容器居中于下方的代码，但是当文本行数比屏幕高时，由于。居中，它只是离开屏幕而已，无法像普通页面一样滚动
这是我的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);
}
固定位置centered将其从常规页面流中删除，这使页面无法滚动。使用以下方法更容易将其居中：
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
background-color: rgb(0, 0, 0);
justify-content: center;
min-height: 100vh;
}
https://codeply.com/p/tUejIBKi12
或者，使用Bootstrap类获得相同的结果：
<body class="d-flex align-items-center justify-content-center min-vh-100">
<div class="container">
I'm centered...
</div>
</body>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句