Question

说我有

<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);

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

强调文字

Answer 1

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

但IE＆lt; 8浏览器不支持它。为了使它适用于所有浏览器，你必须编写一个js，它将找到.inner的高度并应用这些css属性

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

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

希望这会有所帮助。：）

Answer 2

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

Answer 3

尝试

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

jsfiddle

招呼

Answer 4

使用：

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

垂直居中对齐另一个div中的div

4 个答案: