CSS margin-top值不正确

Question

我有非常简单的标记和样式规则,应该把我的 div放在页面的中间,但它没有(实际上,div的顶部将位于中间,而不是100%真正垂直居中)当视口是足够小的高度.

HTML:

<div>adf</div>

CSS:

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

你可以看看我的小提琴看到这个.它需要缩小渲染窗口(右下角),因为它最初是正确的.

Answer 1

而不是50%尝试50vh

50%不会做你想象的那样 - 它实际上使用的width是父容器,而不是height计算.