Ways to center a div ?

1. Using Flex Box

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

2. Using Margin

.child {
    margin: auto;
}

3. Using Grid

.parent {
   display: grid;
   place-content: center;
}

4. Using Positions

.parent {
    position: relative;
}

.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate (-50%, -50%);
}