使用灵活的框布局（现代方法）
对于现代浏览器，您可以使用弹性盒将容器垂直居中布局：
<div class="jumbotron vertical-center">
<div class="container">
...
</div>
</div>.vertical-center {
min-height: 100vh;
display: flex;
align-items: center;
}使用 ::before 伪元素（旧方法）
对于较旧的浏览器，您可以使用 ::before 伪元素元素创建一个将容器对齐的全高元素垂直：
<div class="jumbotron vertical-center">
<div class="container">
...
</div>
</div>.vertical-center {
height: 100%;
width: 100%;
text-align: center;
font: 0/0 a;
}
.vertical-center:before {
content: " ";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.vertical-center > .container {
max-width: 100%;
display: inline-block;
vertical-align: middle;
font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}其他注意事项
以上是如何在 Bootstrap 中垂直居中容器：Flexbox 与伪元素？的详细内容。更多信息请关注PHP中文网其他相关文章！
