在另一个 div 中垂直居中对齐一个 div答案

【问题标题】：Vertically center align a div within anothe div在另一个 div 中垂直居中对齐一个 div
【发布时间】：2012-02-16 17:22:28
【问题描述】：

说我有

<div id ="outer" class="outer">
    <div id= "inner" class="inner">
      //some stuff
    </div>
</div>

内部 div 具有动态高度，它会根据 div 内部的内容而变化。外部 div 只是一个容器，设置为具有窗口的高度。

我想设置它，使内部 div 在外部 div 中垂直居中。有没有办法在 CSS 中轻松做到这一点，还是需要 JavaScript？

我找到的解决方案：

var container= document.getElementById("outer");
var inner= document.getElementById("inner");
var inHeight=inner.offsetHeight;

container.style.height=(window.innerHeight-10);
container.style.width=window.innerWidth;

var conHeight=container.offsetHeight;

inner.style.marginTop=((conHeight-inHeight)/2);

如果其他人正在寻找解决相同问题的方法，这对我有用。

强调文字

【问题讨论】：

相关问题和一些有用的建议：stackoverflow.com/questions/7206640/…

标签： javascript css html vertical-alignment

【解决方案1】：

试试这个http://jsfiddle.net/gLChk/12/

但 IE

$(document).ready(function(){
var inner = $('.inner'),
    ht = inner.height();

inner.css({'position':'absolute','top':'50%','margin':-ht/2+'px 0 0 0'});
});

希望这会有所帮助。 :)

【讨论】：

我认为我只使用 JS 而不是 JQuery 做了几乎相同的事情。看到我的问题。我添加了我想出的解决方案。
哦...好吧，我没有看到您更新的答案...好吧，那也可以。 :)
实际上是在做同样的事情，只是方式不同。

【解决方案2】：

.outer {
    display: table;
    position: relative;
    width:100%;
    height:200px;
    border:1px red solid;
}
.inner {
    display: table-cell;
    position: relative;
    vertical-align: middle;
}

【讨论】：

【解决方案3】：

尝试一下

.inner {
top: 50%;
bottom: 50%;    
}

jsfiddle

问候

【讨论】：

使用这种方法，您是否不需要从 50% 中减去内部 div / 2 的高度以获得“精确”垂直居中？
如果你检查得当，它不完全垂直在中间。

【解决方案4】：

使用：

.inner
{
    margin-top:auto;
    margin-bottom:auto;
}

【讨论】：

我实际上认为这会起作用......但事实证明我的外部div没有设置为窗口的高度和宽度......