How to center a child element in CSS, even if it is larger than the parent?

Add left: 50%; transform: translate(-50%, 0);and remove right: 0px;

.centered {
    position: absolute;
    margin: auto;
    display: block;
    bottom: 0px;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0);
}

Demo