title: How to vertically align in Bootstrap 4?
body: <p>I am trying to vertically align the contents of my jumbotron at center in Bootstrap 4 (4.0.0-alpha.6). This happens fine in Chrome and Safari on the Mac desktop, but neither on my iOS devices, where the text still aligns to the top.</p>
  
  <p>I am forcing the jumbotron to display taller than it otherwise would with min-height, to accommodate a background picture.</p>
  
  <p>Here is the HTML...</p>
  
  <pre><code>&lt;!-- jumbotron --&gt;
  &lt;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"&gt; &lt;!-- .jumbotron-fluid and content in .container make jumbotron full-width and squared corners, cf. https://v4-alpha.getbootstrap.com/components/jumbotron/  --&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-12 cxt-title"&gt;
          &lt;h1 class="display-4 pb-2"&gt;Jumbotron title&lt;/h1&gt;
          &lt;p class="lead pb-4"&gt;Sub-title sub-title sub-title v sub-title sub-title sub-title sub-title &lt;/p&gt;
          &lt;a class="btn btn-primary pmd-ripple-effect btn-lg mb-4" href="#" role="button"&gt;Get Started&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS...</p>
  
  <pre><code>.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');
  }
  </code></pre>
  
  <p>The key part is...</p>
  
  <pre><code>display: flex;
  align-items: center;
  </code></pre>
  
  <p>As I said, it works fine on desktop, but not iOS devices like my iPad.</p>
  
  <p>I have also tried adding some webkit references...</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>... But that doesn't fix it.</p>
  
  <p>I know, according to the release docs, that, as of Bootstrap 4.0.0 alpha 6, "Bootstrap 4 is now flexbox by default!" But I don't know whether that negates the need for me to call the flex stuff above.</p>
  
  <p>How do I correctly get things to vertically align at center?</p>
  
  <p>Solution should be a Bootstrap 4-centric solution.</p>