html - 将孩子置于其父母内部

Question

我正在努力以 100% 的高度和宽度将 #child 置于 #parent 的中心。为什么将 #child 顶部位置设置为 10% 有效，但使用 10% 作为 margin-top 却不起作用？

http://jsfiddle.net/rbtstudio/SCmfG/

<style>
    html {
        height: 100%;
    }
    body {
        height: 100%;
        overflow: hidden;
    }
    #parent {
        width: 100%;
        height: 100%;
        background-color: #323232;
    }
    #child {
        width: 80%;
        height: 80%;
        background-color: #eaeaea;
        margin: 0 auto;
        position: relative;
        top: 10%;
    }
    /*
    #child {
        width: 80%;
        height: 80%;
        margin-top: 10%;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
    }
    */
</style>

<div id="parent">
    <div id="child"></div>
</div>

Answer 1

这里的问题被称为“折叠边距”。您可以在 css 规范中阅读有关它们的更多信息。

http://www.w3.org/TR/CSS21/box.html#collapsing-margins

不是边距不起作用，而是边距正在折叠，导致边距应用于父框的顶部。

您会注意到，当将边距应用于子级时，父级会向下移动。

http://jsfiddle.net/SCmfG/4

避免边距折叠的一种（许多）解决方法是添加overflow: hidden到父元素：

http://jsfiddle.net/SCmfG/5/

编辑：要记住的另一个重要点（在另一个已被删除的答案中）是所有百分比边距都基于元素宽度的百分比，甚至是顶部和底部。