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

Question

I would like to create a css class so a div can be placed in the center of its parent. The code I am using is:

.centered {     position: absolute;     margin: auto;      bottom: 0px;     left: 0px;     top: 0px;     right: 0px; } 

It works if the parent is larger than the child element, or has the same size: https://jsfiddle.net/cy8dn1km/

But if the child is larger, then its center is not positioned at the center of its parent. Instead their left borders will be at the same place, and the child element will be extended only to right:

https://jsfiddle.net/797L7nce/

Something is wrong with the horizontal centering.

How is it possible to fix it using CSS only (without using CSS 2D/3D transformations), without adding new container elements?

Answer 1

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