html - 另一个 div 内的 div 没有垂直对齐

Question

我正在尝试将一个 div 置于容器的中心，该容器的高度和宽度均为 %。我可以让 div 水平对齐，但不能垂直对齐。

谁能告诉我我做错了什么？

HTML:

<div id='container' >
    <div id="login">
    </div>
</div>

CSS:

html,body{
    height:100%;
    width: 100%;
    margin: 0;
}

#container{
    height: 99%;
    width: 99%;
    margin: auto;
}

#login{
    width: 30%;
    height: 30%;
    border: groove 1px grey;
    margin: auto;
}

JsFiddle 是:http://jsfiddle.net/g83RY/

Answer 1

只要给 position:relative;顶部:35%； 到 #login。

这是容器中剩余高度的一半，即 100 - 30 = 70 => 70/2 = 35%。

这是如何工作的:

  // 35% space on top
  // 30% space occupied by login
  // 35% space on bottom (occupied automatically)

  //which is equal to 100

Working Fiddle