Html 为什么我的元素与它的同级对齐？aka溢出：隐藏在父分段左侧：子分段50%

以下是我的图表的简要说明（如下所示）：
黄色框是父项。
黑色和青色框是黄色框的子项。
多余的青色框由其父项通过

overflow:hidden

由于

overflow:hidden

中断了

margin:auto

，我尝试使用

left:50%

将黑框居中到其父框（即黄色框）。但是，黑框将自身与青色框的全宽对齐

有人能解释一下，我可以用另一种方法将黑盒子与其父盒子的宽度对齐吗？我也会接受一个修正

边距：auto

的答案

这是我的密码：

.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;
}

---

你不小心造成了多么奇妙的视错觉啊

实际上，

left:50%

工作正常。虽然它看起来像是

。黑盒子

居中于

。青色盒子

，但实际上

左：50%

正在移动

的最左边。黑盒子

-不是你期望的中心于

。黄盒子

。通过添加

transform:translate（-50%）至
。黑盒
。这将
.black box
移回其宽度的50%，从而使其真正居中于其父对象


。黑盒{
宽度：144px；
高度：84px；
位置：绝对位置；
z指数：2；
背景：黑色；
左：50%；
转换：翻译（-50%）；
}
.黄色盒子{
高度：498px；
宽度：33.33333%；
位置：相对位置；
背景：黄色；
边缘底部：20px；
}
.青色盒{
显示：块；
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
宽度：654px；
高度：654px；
背景：青色；
}
.一半{
宽度：50%；
右边框：1px黑色实心；
身高：100%；
}

你也可以添加你的HTML吗？嘿@Sidsec9这里有一把小提琴：嘿@ManojKumar看看我对Sidsec9Nice解决方案David的回应。我最终使用了
transform:translate（-50%，-50%）
修复我与
top:50%
的相同对齐问题。您如何知道
transform:translate（-50%）
会起作用？我想它会在
left:50%
声明之前将其向右移回原来的位置。你能解释一下
transform
在这个场景中是如何工作的吗？或者让我看一篇文章，“去神秘化”
transform
？
transform:translate（-50%）
基于它所放置的元素的宽度，而
left:50%
基于定位对象所相对于的元素。因此
left:50%
将左边缘移到中间，而
transform:translate（-50%）
将其拉回自身宽度的一半；让它成为左边缘曾经所在的中心。哇，你刚才给了我一个哈哈的时刻。我还没有做任何跨浏览器测试，但我相信你的话。谢谢你，大卫。