css - 使用自动边距或 % 在父 div 中定位一个 div

Question

我的印象是，在另一个 div 中包含的 div 上使用 % 或 auto 作为边距时，位置将根据父 div 进行计算。

如果我有一个 div，height: 50%，margin-top: 25% 和 margin-bottom: 25%框应在父 div 内垂直居中。

当我这样做时，尽管 div 位于页面中心而不是父 div。

CSS

    div#header {
width: 100%; 
height: 100px; 
margin: 0px;
position: fixed;
}

    div#leftnavigation {
height: 50%;
margin-top: 25%;
margin-bottom: 25%;
float: left;
}

和 HTML

    <!--Title and navigation bar-->
    <div id='header'>

     <!--Left navigation container-->
     <div id='leftnavigation'>
     <p>efwfwgwegwegweg</p>
     </div>

     </div>

在我的例子中，还有其他 div float 到上面详述的那个 div 的右侧，但它们中的任何一个都以相同的方式运行。我假设我在做一些愚蠢的事情，但我已经解决了所有我能找到的其他问题，但仍然无法弄清楚。

编辑
这是要求的 JSFiddle http://jsfiddle.net/ChtVv/

更新
我已经尝试删除边距限制并将 leftnavigation div 设置为 height: 100%，这是可行的，所以问题出在 margin 属性上？

Answer 1

它不起作用的原因是边距百分比是父级宽度的百分比，而不是其高度。您可以使用 margin-top: 25px; 来说明这一点； margin-bottom: 25px;，并在 jsFiddle 中增加右侧面板的宽度。

In all cases % (percentage) is a valid value, but needs to be used with care; such values are calculated as a proportion of the parent element’s width, and careless provision of values might have unintended consequences.

W3 reference