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