Html 不考虑边距的垂直对齐

我试图将内容垂直居中于固定高度

我正在使用

top:50%

和

transform:translateY（-50%）

的技术来实现这一点，但我无法理解为什么子元素的

边距

没有被考虑，而

填充

被考虑

如果运行下面的代码段，您可以看到左框（其中

元素具有浏览器默认边距）的内容垂直对齐方式低于右框（其中

元素已删除边距并替换为
填充
），它完全位于中间

为什么边距会导致此问题，而填充物不会导致此问题？


*，*：：之前，*：：之后{
框大小：边框框；
-moz框大小：边框框；
}
.集装箱{
高度：100px；
边框：1px实心#000；
保证金权利：5%；
宽度：45%；
浮动：左；
}
.内容{
位置：相对位置；
最高：50%；
-webkit转换：translateY（-50%）；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
背景色：青色；
}
.无需支付保证金{
保证金：0；
填充：8px；
}

你好，世界

你好，世界

你好，世界

你好，世界

页边距折叠。。add overflow:auto和这两个示例都很好。您还应该注意元素的初始位置，top会将元素从该位置移动到容器元素的顶部，而不是容器元素的顶部（我正在添加另一个副本），以说明发生了什么：尝试溢出：隐藏到内容，这将需要整个heightmargin崩溃。。add overflow:auto，这两个例子都很好。您还应该注意元素的初始位置，top会将元素从该位置移动到容器元素的顶部，而不是容器元素的顶部（我正在添加另一个副本），以说明发生了什么：Try overflow:hidden to content，它将占据整个高度