This is the code to center an element that is positioned absolutely inside a relative parent.

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

Center vertically only

.centered-y {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Center horizontally only

.centered-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Topics: CSS