当窗口高度降低时，Margin-top百分比不会改变

Question

我正在研究一个项目，其中客户希望导航<div>根据屏幕高度对齐，类似于margin-left作为屏幕宽度减少时的百分比。

所以，我给margin-top: 20%和导航<div>显示这个边距，但是当我降低窗口的高度时，它不根据屏幕高度调整，尽管它在我降低屏幕宽度时有效。

我的问题不是如何我能做到这一点，但为什么百分比水平工作，而不是垂直?

下面是一个例子:http://jsfiddle.net/sandeep/5VReY/

Answer 1

根据css规范，百分比作用于容器块的宽度

百分比是相对于的宽度计算的生成盒子的包含块。注意，对于'margin-top'和'margin-bottom'。

Answer 2

可以使用margin prop设置为auto;

如果你有一个这样的代码块:

<div class="centered"></div>

可以像这样垂直居中:

.centered {
    width: 100px; height: 100px; /* must be present. No matter the value */
    position: absolute;          /* to props top/bottom take effect */
    margin: auto;                /* here's the magic. */
    bottom: 0px; top: 0px;       /* This is how you center a block verticaly */
}

同样可以实现水平对齐宽度左/右属性。您还可以设置偏移量，以便复制块中心以外的其他点。

在这里，我给您留下一些例子，说明如何以及如何将这些属性组合起来。http://jsfiddle.net/SQDJ6/