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; top: 35%;提交给#login即可。

是容器中剩余高度的一半，即100 - 30 = 70 =＆gt; 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

Answer 2

要垂直对齐div，您必须将div视为内联元素，并将div的行高设置为容器div的高度。那样你就可以打电话了

line-height:y px;
vertical-align:middle;

Answer 3

由于您没有固定的高度，以下内容应该为您完成：

#login{     
    top:49%;
    position:relative;
}

小提琴：http://jsfiddle.net/g83RY/3/

其他div内的Div不垂直对齐

3 个答案: