This
.some-class {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 20rem;
}
and this
.some-class {
display: flex;
align-items: center;
min-height: 20rem;
}
appear the same to me.
CSS-Tricks says,
You can think of align-items as the justify-content version for the cross-axis (perpendicular to the main-axis).