另一个 div 内的 div 不垂直对齐答案

【问题标题】：Div inside anothe div does not vertically align另一个 div 内的 div 不垂直对齐
【发布时间】：2013-11-30 01:23:44
【问题描述】：

我正在尝试将一个 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/

【问题讨论】：

您不能使用 css 垂直对齐 div 中心，您需要使用 javascript 动态分配边距或填充。
这就是您要找的东西？：jsfiddle.net/g83RY/3
引用这个：[如何将 div 设置在屏幕中心，其大小动态变化][1] [1]：stackoverflow.com/questions/16052044/…

标签： html css position alignment

【解决方案1】：

只需将position:relative; top: 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

【讨论】：

我删除了我的margin-top 建议，因为在处理百分比时，margin-top 和 margin-bottom 是相对于 width 而不是 height(yeah)。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

由于你没有固定的高度，下面应该为你做：

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

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

【讨论】：

那不在中间.. 你的计算是错误的。顶部应该是35%检查我的答案:)