Horizontal Centering - Good

flex-direction: column; align-items: center;

flex-direction: row; justify-content: center;

flex-direction: column; margin: auto;

flex-direction: row; margin: auto;

Vertical Centering - Bad

flex-direction: column; justify-content: center;

flex-direction: row; align-items: center;

flex-direction: column; margin: auto;

flex-direction: row; margin: auto;