Вертикально по центру выровняйте div внутри другого div

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 <8.Чтобы он работал во всех браузерах, вам нужно написать js, который найдет высоту .inner и применить эти свойства CSS </p>

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

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

Надеюсь, это поможет.:)

Answer 2

Попробуйте с

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

jsfiddle

приветствует

Answer 3

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

Answer 4

использование:

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