如何在 Bootstrap 4 中垂直对齐？

我试图在 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;

正如我所说，它在桌面上运行良好，但在 iOS 设备（如我的 iPad）上运行不佳。

我还尝试添加一些 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 为中心的解决方案。

了解您是否可以使用flexbox在特定设备上，您需要仔细查看设备的系统+浏览器版本，然后caniuse flexbox http://caniuse.com/#feat=flexbox.

用于为您添加前缀CSS, use autoprefixer https://autoprefixer.github.io/。为了获得最大的浏览器兼容性，请输入> 0%在页面底部的小设置框中。

如果您执行了上述所有操作，您的代码应该在任何配备 iOS 7.0 或更高版本的设备上正确呈现。

在当前形式下，您的代码不提供跨浏览器的 Flexbox 解决方案，也没有使用 Bootstrap 4 的 Flexbox 实现，这就是您在 iOS 设备上遇到问题的原因。
为了使用Bootstrap的居中flexbox课程，你需要：

• apply .d-flex and .justify-content-center在父母身上
• 应用足够的min-height在同一个父母身上
• apply .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>

针对您的评论问题的答复：

我上面提供的例子是generic，旨在帮助任何需要 Bootstrap 4 示例的人flexbox定心。您可以完全自由地更改它以满足您项目的特定需求。

1. 我将样式添加到该框中，以便您可以看到它。当然，您不需要在项目中应用颜色/阴影。
2. 不必要。这取决于flex-direction。为了更好地了解flexbox我推荐的型号a guide to flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and current specs https://www.w3.org/TR/css-flexbox-1/.
3. a) vh意思是“视口高度/100” - 它完全不同于100%， 因为100%可以是视口高度的 5 倍，具体取决于您的内容，而100vh始终是视口高度。在当今的网络中，vh很受欢迎，因为它使您能够拥有“整页高度面板”可以与scollTo()类型导航。如果您有固定的导航栏，您可以使用min-height: calc(100vh - Npx) where N是你的导航栏的大小px.
   b) 是的，斜杠/是故意的，它的意思是“背景大小”。看background https://developer.mozilla.org/en-US/docs/Web/CSS/background速记。