Center an absolutely positioned element inside parent

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