flexbox middle item centered

1.Aligner {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5}
6
7.Aligner-item {
8  max-width: 50%;
9}
10
11.Aligner-item--top {
12  align-self: flex-start;
13}
14
15.Aligner-item--bottom {
16  align-self: flex-end;
17}
18

1.container {
2  display: flex;
3  
4  justify-content: space-around;
5  /* OR */
6  justify-content: space-evenly;
7}