如何使用 Flexbox 和传统方法在 Bootstrap 中垂直居中容器？

如何在 Bootstrap 中垂直居中容器？

使用 Bootstrap 时，经常会遇到垂直对齐的需要，尤其是在 Jumbotron 组件中。本文深入研究了使用灵活框和传统方法来实现此目的的两种方法。

灵活框方法

随着灵活框布局的出现，垂直对齐已变得显着简化。此方法利用了 display: flex 属性和设置为 center 的align-items 属性。

.vertical-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

旧版浏览器的传统方法

为了兼容 Internet Explorer 8 和 9，传统方法建议使用伪元素和内联块元素。该方法涉及创建一个全高的伪元素，将其垂直对齐设置为中间，并将伪元素和容器元素的显示都设置为内联块。

.vertical-center {
  height: 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;
}

其他注意事项

• 为了防止超小屏幕中的垂直对齐问题，可以使用 CSS 媒体将伪元素的高度设置为 auto 或 0查询。
• 为了确保页脚/页眉部分保持可见并位于其他元素之上，请考虑使用正确的定位和更高的 z 索引值。

以上是如何使用 Flexbox 和传统方法在 Bootstrap 中垂直居中容器？的详细内容。更多信息请关注PHP中文网其他相关文章！