如何在 Bootstrap 中垂直居中容器：Flexbox 与伪元素？

如何在 Bootstrap 中垂直居中容器

使用灵活的框布局（现代方法）

对于现代浏览器，您可以使用弹性盒将容器垂直居中布局：

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

其他注意事项

• 为了防止小屏幕上出现意外问题，您可以重置 ::before 伪值的高度-element 为 auto 或 0。
• 如果容器周围有页脚/页眉部分，请将它们正确放置并添加较高的 z-index 值可让它们保持在顶部。

以上是如何在 Bootstrap 中垂直居中容器：Flexbox 与伪元素？的详细内容。更多信息请关注PHP中文网其他相关文章！