如何使用 Bootstrap 等方法使容器垂直居中？

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

与灵活框的垂直对齐

灵活的框布局为垂直对齐提供了简单的解决方案。除 Internet Explorer 8 和 9 外，它受到现代 Web 浏览器的广泛支持。

创建一个名为 .vertical-center 的类并将其添加到 .jumbotron div。

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

传统旧版 Web 浏览器的方法

对于像 Internet Explorer 8 和 9 这样的旧版浏览器，我们可以使用伪元素和垂直对齐。

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

注意事项

• 内联元素垂直对齐到父级的基线加上父级 x 高度的一半。
• 居中垂直内联元素，其高度必须设置为与父元素的高度相匹配。
• 伪元素可以用于创建全高内联块元素以实现垂直对齐。
• 重置字体属性以避免内联元素之间出现间隙。
• 考虑容器周围元素的定位和 z-index妥善安排。

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