Center element vertically in bootstrap 4.0?

Question

I want an element to be centered vertically in a page and i am using bootstrap 4.0. Most of the methods i found were about earlier versions or the alpha, and the official method doesn't work, so, could someone please explain clearly once and for all how to center an element vertically in bootstrap?

Answer 1

Use Bootstrap's align-items-center, which can be read here

<div class="container">
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

---

EDIT

You can also use Bootstrap's new support for flex box to center vertically, which can be read here

<div class="d-flex align-items-center">...</div>