css centering

1/* this will center all children within the parent element. */
2.parent {
3  display: flex;
4  justify-content: center; /* horizontal */
5  align-items: center; /* vertical */
6}

1.parent {
2  position: relative;
3}
4.child {
5  position: absolute;
6  top: 50%;
7  left: 50%;
8  transform: translate(-50%, -50%);
9}

1/* No Flexbox */
2.parent {
3  position: relative;
4}
5.child {
6  position: absolute;
7  top: 50%;
8  transform: translateY(-50%);
9}
10
11/* With Flexbox */
12
13.parent {
14  display: flex;
15  flex-direction: column;
16  justify-content: center;
17}
18
19
20

1/*Remove comment to become a better programmer. */
2/* No Flexbox */
3.parent {
4  position: relative;
5}
6.child {
7  position: absolute;
8  top: 50%;
9  transform: translateY(-50%);
10}
11
12/* With Flexbox */
13
14.parent {
15  display: flex;
16  flex-direction: column;
17  justify-content: center;
18}
19

1// grid
2
3.parent { 
4  display: flex;
5  align-items: center;
6  justify-content: center;
7}
8
9//flex box
10
11.parent { 
12  display: flex;
13  align-items: center;
14  justify-content: center;
15}
16
17// position
18
19.parent { 
20  position: relative;
21}
22
23.child {
24  position: absolute;
25  left: 50%;
26  right: 50%;
27  transform: translate(-50%, -50%);
28}
29

1img {
2	display: block;
3	margin-left: auto;
4	margin-right: auto;
5}