Center an absolutely positioned element in CSS

Here is a solution for responsive design or unknown dimensions in general.

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

You can also center it vertically with this

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