How to Vertical Align Center in Bootstrap 4

Hello everyone today I will talk about using bootstrap with the cases that we often encounter when you use. I want Vertical Align Center in Bootstrap 4 in row to make this problem have a lot of handling you can choose for yourself the most appropriate way.

Way 1: Important! Vertical center is relative to the height of the parent

Option 1 align-self-center on flexbox child

<div class="container d-flex h-100">
    <div class="row justify-content-center align-self-center">
     I'm vertically centered
    </div>
</div>

Option2 align-items-center  on flexbox parent (.row is display:flex; flex-direction:row)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

Option 3 justify-content-center on flexbox parent (.card is display:flex;flex-direction:column)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="card h-100 border-primary justify-content-center">
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

Way 2: Vertical Center Using Auto Margins

Another way to vertically center is to use my-auto. This will center the element within it's container. For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

CSS my-auto:

margin-top: auto;
margin-bottom: auto;

Way 3: Vertical Center with Flexbox:

Since Bootstrap 4 .row is now display:flex you can simply use align-self-center on any column to vertically center it...

<div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Way 4:  use align-items-center on the entire .row to vertically center align all col-* in the row

<div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Way 5: Vertical Center Using Display Utils

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Way 6: you can vertically align your container by making the parent container flex and adding align-items:center

CSS

body {
  display:flex;
  align-items:center;
}

or below css

.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Way 7: Following bootstrap 4 classes helped me solve this

<div class="col text-center justify-content-center align-self-center">
    <img width=3rem src=".." alt="...">
</div>