Use the .align-self-*-center classes to align a flex item in the center of a flex container on different screens.
Resize the browser window to see the effect. Note: align-self-stretch is default.
.align-self-center:
.align-self-center
.align-self-sm-center:
.align-self-sm-center
.align-self-md-center:
.align-self-md-center
.align-self-lg-center:
.align-self-lg-center
.align-self-xl-center:
.align-self-xl-center