title: Vertical alignment in bootstrap 4
body: <p>I'm trying to have a center text over image. I've used <a href="https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering" rel="nofollow noreferrer">mx-auto</a> to Horizontal centering my overlay text and use <a href="https://v4-alpha.getbootstrap.com/utilities/vertical-align/" rel="nofollow noreferrer">align-middle</a> for a Vertical alignment. But the vertical alignment didn't work. Does somebody know why ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  
  
    &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
        &lt;div class="card "&gt;
  &lt;img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Deer in nature"&gt;
  &lt;div class="card-img-overlay d-flex"&gt;
    &lt;div class="mx-auto"&gt;
  &lt;h4 class="card-title align-middle"&gt;Animal Farm&lt;/h4&gt;
  &lt;h6 class="text align-middle"&gt;George Orwell&lt;/h6&gt;
  &lt;p class="card-text align-middle"&gt;Tired of their servitude to man, a group of farm animals revolt and establish their own society...&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>