<h5 class="text-center">Use Vertical align for inline elements</h5>
<div class="border mb-4">
  <span class="align-baseline">baseline</span>
  <span class="align-top">top</span>
  <span class="align-middle">middle</span>
  <span class="align-bottom">bottom</span>
  <span class="align-text-top">text-top</span>
  <span class="align-text-bottom">text-bottom</span>
</div>



<h5 class="text-center">Use Flexbox for block elements</h5>

<p class="text-center"><strong>Notes:</strong> It is important to set the body and html to 100% and give your parent container some height.</p>

<div class="d-flex flex-column justify-content-center h-25">
    <h1>Vertical Center</h1>
  <a href="https://bootstrapcreative.com/resources/flexbox-cheat-sheet/">Get Flexbox Cheat Sheet</a>
</div>

<div class="d-flex flex-column justify-content-center align-items-center h-25">
    <h1>Center Center</h1>
  <a href="https://bootstrapcreative.com/resources/flexbox-cheat-sheet/">Get Flexbox Cheat Sheet</a>
</div>


<div class="d-md-flex flex-md-column justify-content-md-center align-items-md-center h-25">
    <h1>Center Center</h1>
    <p>only on md breakpoint and up</p>
  <a href="https://bootstrapcreative.com/resources/flexbox-cheat-sheet/">Get Flexbox Cheat Sheet</a>
</div>
body, html {
  height:100%;
}

/* For demonstration purposes only */
.border span {
  border:1px dotted red;
  font-size:1.5rem;
}

div[class^="d"]{
  background-color:#e2e2e2;
  padding:1rem;
  margin:1rem;
}

External CSS

  1. https://jacoblett.github.io/bootstrap4-latest/bootstrap-4-latest.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.2.1.slim.min.js
  2. https://jacoblett.github.io/bootstrap4-latest/bootstrap-4-latest.min.js