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>