CSS margin-top值不正确

Question

我有非常简单的标记和样式规则应该将我的div放在页面的中间，但它没有（实际上，div的顶部将位于中间，而不是100％真正居中垂直方向）当视口的高度足够小时。

HTML：

<div>adf</div>

CSS：

div {
    background-color:red;
    margin-top:50%;
}

您可以查看我的Fiddle以查看此内容。它需要缩小渲染窗口（右下角），因为它最初是正确的。

Answer 1

而不是50%尝试50vh

50%没有按照您的想法行事 - 它实际上使用的是父容器的width，而不是height来计算。

Answer 2

尝试使用vh

替换百分比

div {
    background-color:red;
    margin-top:50vh;
}

<div>adf</div>

Here是关于视口大小度量的更酷的东西

Answer 3

这是另一种解决方案： http://jsfiddle.net/nb6pq14v/

＆＃13;

＆＃13;

{{1}}

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;