如何在Bootstrap 4中垂直對齊？

Question

我正在嘗試在Bootstrap 4（4.0.0-alpha.6）的中心垂直對齊巨型機的內容。 在Mac桌面上的Chrome和Safari中，這種情況發生的很好，但是在我的iOS設備上，這兩種方法的文本仍然對齊頂部。

我強迫超大顯示器以最小高度顯示高於其他高度，以容納背景圖片。

這是HTML ...

<!-- jumbotron -->
<div class="jumbotron jumbotron-fluid mb-0 cxt-bg-dark-grey cxt-bgimg-frame cxt-bgimg-tint cxt-bgimg-cook text-white text-center" style="min-height:500px"> <!-- .jumbotron-fluid and content in .container make jumbotron full-width and squared corners, cf. https://v4-alpha.getbootstrap.com/components/jumbotron/  -->
  <div class="container">
    <div class="row">
      <div class="col-md-12 cxt-title">
        <h1 class="display-4 pb-2">Jumbotron title</h1>
        <p class="lead pb-4">Sub-title sub-title sub-title v sub-title sub-title sub-title sub-title </p>
        <a class="btn btn-primary pmd-ripple-effect btn-lg mb-4" href="#" role="button">Get Started</a>
      </div>
    </div>
  </div>
</div>

這是CSS ...

.cxt-bgimg-frame {
  width:100%;
  height:100%;
  height:calc(100% - 1px);
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
  display: flex;
  align-items: center;
}
.cxt-bgimg-tint {
  background-color: rgba(10,10,10,0.6);
  background-blend-mode: multiply;
}
.cxt-bgimg-cook {
  background-image:url('path/to/my/image.png');
}

關鍵部分是...

display: flex;
align-items: center;

就像我說的那樣，它可以在台式機上正常工作，但不能在iPad等iOS設備上正常工作。

我也嘗試添加一些Webkit引用...

.cxt-bgimg-frame {
  width:100%;
  height:100%;
  height:calc(100% - 1px);
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
 -ms-flex-align: center;
 -webkit-align-items: center;
 -webkit-box-align: center;
 align-items: center;
}

...但這並不能解決問題。

根據發布文檔，我知道從Bootstrap 4.0.0 alpha 6開始，“ Bootstrap 4現在默認為flexbox！” 但是我不知道這是否否定了我調用上面的flex東西的需要。

如何正確使物體垂直居中對齊？

解決方案應該是以Bootstrap 4為中心的解決方案。

Answer 1

要了解是否可以在特定設備上使用flexbox ，需要仔細查看設備的系統+瀏覽器版本以及caniuse flexbox 。

要為CSS autoprefixer前綴，請使用autoprefixer 。 為了獲得最大的瀏覽器兼容性，請在頁面底部的小設置框中輸入> 0% 。

如果執行上述所有操作，則代碼應在具有iOS 7.0或更高版本的任何設備上正確呈現。

---

在當前形式下，您的代碼沒有提供跨瀏覽器的flexbox解決方案，也沒有使用Bootstrap 4的flexbox實現，這就是您在iOS設備上遇到麻煩的原因。
為了居中使用Bootstrap的flexbox類，您需要：

• 在父.justify-content-center上應用.d-flex和.justify-content-center
• 對同一個父母施加足夠的min-height
• 在孩子上應用.align-self-center

例：

 .cxt-bgimg-frame { min-height:100vh; background: url('http://lorempixel.com/g/1024/768') no-repeat 50% 50% /cover; } .align-self-center.p-3 { background-color: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.21); box-shadow: 0 6px 6px -3px rgba(0,0,0,.2), 0 10px 14px 1px rgba(0,0,0,.14), 0 4px 18px 3px rgba(0,0,0,.12); } body {margin: 0;} 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <div class="jumbotron jumbotron-fluid mb-0 cxt-bg-dark-grey cxt-bgimg-frame cxt-bgimg-tint cxt-bgimg-cook text-white d-flex justify-content-center"> <div class="container align-self-center"> <div class="row"> <div class="col-md-12 cxt-title d-flex justify-content-center" style="min-height:70vh"> <div class="align-self-center text-center p-3"> <h1 class="display-4 pb-2">Jumbotron title</h1> <p class="lead pb-4">Sub-title sub-title sub-title v sub-title sub-title sub-title sub-title </p> <a class="btn btn-primary pmd-ripple-effect btn-lg mb-4" href="#" role="button">Get Started</a> </div> </div> </div> </div> </div> 

---

您的評論問題的答案：

我上面提供的示例是通用示例，旨在幫助需要在Bootstrap 4的flexbox居中使用示例的任何人。 您可以完全自由地對其進行更改，以適應項目的特定需求。

1. 我將樣式添加到該框中，以便您可以看到它。 當然，您無需在項目中應用顏色/陰影。
2. 不必要。 這取決於flex-direction 。 為了更好地了解flexbox模型，我推薦a guide to flexbox和current specs a guide to flexbox 。
3. a） vh意思是“視口高度/ 100”-與100%完全不同，因為100%可以是視口高度的5倍，具體取決於您的內容，而100vh始終是視口高度。 在當今的網絡中， vh非常流行，因為它使您擁有“全頁高度面板” ，可以與scollTo()類型的導航一起使用。 如果您有固定的導航欄，則可以使用min-height: calc(100vh - Npx)其中N是導航欄的大小（以px 。
   b）是的，斜杠/是故意的，它表示“背景大小”。 請參閱background速記。