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

Bootstrap 中 Jumbotron 內容器的垂直對齊

Bootstrap 中 Jumbotron 內容器的垂直對齊可以透過多種方法實現，這取決於需要瀏覽器支援。

現代方式

使用Flexbox

對於支援Flexbox的現代瀏覽器，更直接且一致的方法是使用Flexbox佈局模型。透過將以下 CSS 新增至您的頁面：

.vertical-center {
  display: flex;
  align-items: center;
}

您可以輕鬆地將容器在大螢幕中垂直居中。確保以類別為“.vertical-center”的 div 包圍容器。

老式方式

對於較舊的瀏覽器

對於缺乏 Flexbox 支援的瀏覽器，涉及垂直對齊的網路標準技術需要付出更多的努力。利用 text-align: center 屬性將子元素在父元素內水平對齊。建立一個最初被 display: none 隱藏的 div 元素，其高度等於或小於父元素。現在，在所需元素（如容器）上使用vertical-align 來操縱對齊方式。

.vertical-center {
  text-align: center;
  font: 0/0 a;
}

.vertical-center .hidden-child {
  display: none;
  height: 100%;
}

.vertical-center.aligned .hidden-child {
  display: inline-block;
  vertical-align: middle;
}

在容器內，增加一個 display: inline-block;屬性以及 Vertical-Align: middle;來實現垂直居中。請注意，這涉及一些額外的標記來模仿 Flexbox 的效果。

瀏覽器注意事項

請記住，Internet Explorer 8 和 9 無法正確解釋內聯塊技術，需要替代解決方案。

以上是如何在 Bootstrap Jumbotron 中垂直居中容器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！