如何使用 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中文網其他相關文章！