为什么margin-top不按百分比工作？

Question

我正在尝试从百分比（％）的顶部给表单留一些余量。为什么它不采用这个属性。我想给形式从顶部。

这是我的代码 http://plnkr.co/edit/byQLFlLh4a2qaIEZgfJH?p=preview

我这样给予

main

这不是保证金最高：40％; 为什么？

Answer 1

那么这应该是评论，但是在给予margin:top之后，你给的是margin:auto，它覆盖了最后一个。{1}}。因此，您应该在margin:top后使用margin:auto并在最后一种情况中使用!important，因为这不是一个好习惯。

点击http://plnkr.co/edit/d6Xku9eFPP1L6anS6PVy?p=preview

Answer 2

只需将margin: auto 移到上方margin-top: 40%，以便后者覆盖与之相关的前者部分：

.login-form {
  margin: auto;
  margin-top: 40%;
  width: 50%;
}

Answer 3

.login-form {
  margin: auto;
  margin-top: 40%;
  width: 50%; }

首先将自动设置为margin-top:40%;