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

i create css class div can placed in center of parent. code using is:

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

it works if parent larger child element, or has same size: https://jsfiddle.net/cy8dn1km/

but if child larger, center not positioned @ center of parent. instead left borders @ same place, , child element extended right:

https://jsfiddle.net/797l7nce/

something wrong horizontal centering.

how possible fix using css (without using css 2d/3d transformations), without adding new container elements?

here solution without using css 2d/3d transformations. can use display: flex flex-direction: column (this important) on parent element , display: table on child element.

body,  html {    width: 100%;    height: 100%;    margin: 0;  }  body {    display: flex;    align-items: center;    justify-content: center;    background: green;  }  .centered.d1 {    display: flex;    align-items: center;    justify-content: center;    flex-direction: column;  }  .d1 {    background: yellow;    width: 50px;    height: 50px;  }  .d2 {    background: red;    opacity: 0.7;    width: 250px;    height: 250px;    display: table;  }

<div class="centered d1">    <div class="centered d2"></div>  </div>