css - 別の div 内で div を垂直方向に揃えるにはどうすればよいですか?

Question

重複の可能性:
別の div 内の div を垂直方向に中央揃えする

ある div を別の div 内に垂直に配置しようとしています。それも中心ですが、仕事に取り組めそうです。内側の div には明示的な幅があり、これを行う必要があります。高さは、コンテンツの量によって決定する必要があります。stackoverflow で見たさまざまな解決策を試しましたが、どれもうまく機能していないようです。内側の div に明示的な幅がない場合、または水平方向のセンタリングが必要ない場合、それらのいくつかは機能するようです。この質問は、明示的な幅がないという点で他の質問とは異なります。または、明示的な幅がある場合、解決策には静的パディング、またはパディングを計算する JavaScript が含まれます。これは避けたい。

html:

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

CSS:

.outer {
width: 100%;
height: 96px;
    position:relative;
border:1px black solid;   
background-color: black;
}

.inner {
    width:900px;
    height: 40px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
border: 1px red solid;
vertical-align: middle;
background-color: white;
}

http://jsfiddle.net/F4nrp/

更新、これは以下の通行人によって解決されました。非常によく似た質問をする人は確かにたくさんいますが、ここには十分な違いがあると思います。答えは、私が見た他のどの答えとも同じではありませんでした。