CSS定高多行垂直置中

用Table布局可以很容易的實現文字和圖片的垂直置中，但是在div的布局中呢，要實現定高容器裡面的內容的垂直置中不是太簡單的事情。

在DOM標準中

 

在IE中

 

綜合

#boxOuter
{
    display:table;
    height:300px;
    width:500px;
    border:solid 1px black;
    *position:relative;
}
#box
{
    display:table-cell;
    vertical-align:middle;
    *position:absolute;
    top:50%;
    width:100%;
}
#boxInner
{
    *position:relative;
    width:100%;
    top:-50%;
}

 

<div id="boxOuter">
    <div id="box">
        <div id="boxInner">
            <p>Some Content Here</p>
            <p>Some Content Here</p>
            <p>Some Content Here</p>
            <p>Some Content Here</p>
            <p>Some Content Here</p>
        </div>
    </div>
</div>