css flex vertical align

1/* Answer to: "css flex vertical align" */
2
3.box {
4  display: flex;
5  align-items: center; /* Vertical */
6  justify-content: center; /* Horizontal */
7}
8
9.box div {
10  width: 100px;
11  height: 100px;
12}
13
14/*
15  For more information go to:
16  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
17*/

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

1align-items: flex-start | flex-end | center | baseline | stretch
2
3.container {
4  display: flex;
5  align-items: flex-start;
6}

1<div class="align-vertically">
2  I am vertically centered!
3</div>
4
5
6/*Css  */
7
8.align-vertically {
9  background: #13b5ea;
10  color: #fff;
11  display: flex;
12  align-items: center;
13  height: 200px;
14}

1justify-content: center; /* Horizontal */

1align-items: center; /* Vertical */