如何在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速记。