Five ways to center DIV element in CSS Cheat Sheet by rahilkasimi

Using flexbox

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

Using position

.parent{
    position:relative;
}
.child{
    position:absolute;
    top:50%;
    left:50%;
    transform: transl­ate­(-50%, -50%)
}

Using flex & margin

.parent{
    display:flex;
}
.child{
    margin:auto;
}