How to Center Anything With CSS

.parent {
    position: relative;
}

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

.center_x {
    position: absolute:
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.center_y {
    position: absolute:
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Learning Resources