center with css

1.centered {
2  position: fixed;
3  top: 50%;
4  left: 50%;
5  /* bring your own prefixes */
6  transform: translate(-50%, -50%);
7}

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}

1IMG.displayed {
2    display: block;
3    margin-left: auto;
4    margin-right: auto }
5 ...
6<IMG class="displayed" src="..." alt="...">

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

1.centre {
2    display: flex;
3    flex-direction: column;
4    align-items: center;
5    /* it center the item vertically */
6    justify-content: center;
7    /* it center the item horizontally */
8}

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