bootstrap4

bootstrap4.css

.align-self-center {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}

■レイアウト：rowとcol：カラム単位での垂直方向整列

align-self-start

align-self-center

align-self-end

  <div class="row"> 
    <div class="col align-self-start">align-self-start</div><!-- 垂直上寄せ -->
     <div class="col align-self-center">align-self-center</div><!-- 垂直中央寄せ -->
     <div class="col align-self-end">align-self-end</div><!-- 垂直下寄せ -->
  </div>

■レイアウト：Flex d-flex：ユーティリティ：flexを交差軸上で個別に整列 align-self-center

flex文字01

flex文字02（align-self-center）

flex文字03

  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="align-self-center">flex文字02（align-self-center）</div>
    <div>flex文字03</div>
  </div>