center in css

1.container {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}

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    left: 50%;
7    top: 50%;
8    transform: translate(-50%, -50%);
9}

1.parent {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}

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.center {
2    margin: auto;
3}