html - Why does my element align itself to its sibling? aka overflow: hidden on Parent breaks left: 50% on Children -

here's brief explanation of diagram (shown below):
yellow box parent.
black , cyan boxes children of yellow box.
excess cyan box hidden it's parent via overflow: hidden

since overflow: hidden breaks margin: auto, i've attempted center black box parent (i.e. yellow box) using left: 50%. however, black box aligns full width of cyan box.

could explain way can align black box width of parent? accept answer fixes margin: auto well.

here code:

.yellow-box {     display:table-cell;     height:498px;     width:33.33333333%;     overflow:hidden;     position:relative; }  .cyan-box {     display:block;     height:auto;     position:absolute;     z-index:1;     top:0;     left:0;     width:654px;     height:654px; }  .black-box {     width:144px;     height:84px;     position:absolute;     z-index:2; } 

what fantastic optical illusion you've accidentally created!

really though, left: 50% working fine. while looks .black-box centering .cyan-box, in reality left: 50% moving leftmost side of .black-box—not center expecting—to center of .yellow-box. fixing easy addition of transform: translate(-50%); .black-box. moves .black-box 50% of width, centers parent.

.black-box {    width: 144px;    height: 84px;    position: absolute;    z-index: 2;    background: black;    left: 50%;    transform: translate(-50%);  }  .yellow-box {    height: 498px;    width: 33.33333333%;    position: relative;    background: yellow;    margin-bottom: 20px;  }  .cyan-box {    display: block;    position: absolute;    z-index: -1;    top: 0;    left: 0;    width: 654px;    height: 654px;    background: cyan;  }  .half {    width: 50%;    border-right: 1px black solid;    height: 100%;  }

<div class="yellow-box">    <div class="black-box">    </div>    <div class="cyan-box">    </div>    <div class="half"></div>  </div>

the illusion breaks when size of page changes. i've added line down center can see middle of .yellow-box.

here's example comparing difference.

.yellow-box {    height: 100px;    width: 33.33333333%;    position: relative;    background: yellow;    margin-bottom: 20px;  }  .cyan-box {    display: block;    position: absolute;    z-index: -1;    top: 0;    left: 0;    width: 654px;    height: 100px;    background: cyan;  }  .black-box {    width: 144px;    height: 84px;    position: absolute;    z-index: 2;    background: black;    left: 50%;  }  .black-box-two {    width: 144px;    height: 84px;    position: absolute;    z-index: 2;    background: black;    left: 50%;    transform: translate(-50%);  }  .half {    width: 50%;    border-right: 1px black solid;    height: 100%;  }  * {    margin: 0;    padding: 0;  }

<div class="yellow-box">    <div class="black-box">    </div>    <div class="cyan-box">    </div>    <div class="half"></div>  </div>  <div class="yellow-box">    <div class="black-box-two">    </div>    <div class="cyan-box">    </div>    <div class="half"></div>  </div>

so .black-box not aligning it's sibling @ all, looks way.

if want able use margin: 0 auto need use position: relative on .black-box. margin's have no affect on absolutely positioned elements.

.yellow-box {    height: 498px;    width: 33.33333333%;    position: relative;    background: yellow;    margin-bottom: 20px;    overflow: hidden;  }  .cyan-box {    display: block;    position: absolute;    z-index: -1;    top: 0;    left: 0;    width: 654px;    height: 654px;    background: cyan;  }  .black-box {    width: 144px;    height: 84px;    position: relative;    z-index: 2;    background: black;    margin: 0 auto;  }  .half {    width: 50%;    border-right: 1px black solid;    height: 100%;  }

<div class="yellow-box">    <div class="black-box">    </div>    <div class="cyan-box">    </div>    <div class="half"></div>  </div>

if use position: relative instead of position: absolute, margins once again take effect. can still use top, right, bottom, , left if care so.

here's example contrasting 2 working solutions code provided (left using transform: translate(-50%), middle original code, , right using margin: 0 auto).

.yellow-box {    height: 100px;    width: 30%;    position: relative;    background: yellow;    margin-bottom: 20px;    overflow: hidden;  }  .cyan-box {    display: block;    position: absolute;    z-index: -1;    top: 0;    left: 0;    width: 654px;    height: 100px;    background: cyan;  }  .black-box {    width: 144px;    height: 84px;    position: relative;    z-index: 2;    background: black;    margin: 0 auto;  }  .black-box-two {    width: 144px;    height: 84px;    position: absolute;    z-index: 2;    background: black;    left: 50%;    margin: 0 auto;  }  .black-box-three {    width: 144px;    height: 84px;    position: absolute;    z-index: 2;    background: black;    left: 50%;    transform: translate(-50%);  }  .half {    width: 50%;    border-right: 1px black solid;    height: 100%;  }  * {    margin: 0;    padding: 0;  }  body {    display: flex;    justify-content: space-between;  }

<div class="yellow-box">    <div class="black-box">    </div>    <div class="cyan-box">    </div>    <div class="half"></div>  </div>  <div class="yellow-box">    <div class="black-box-two">    </div>    <div class="cyan-box">    </div>    <div class="half"></div>  </div>  <div class="yellow-box">    <div class="black-box-three">    </div>    <div class="cyan-box">    </div>    <div class="half"></div>  </div>