垂直对齐div，动态的身高和宽度

Question

我有一个固定宽度和高度的div固定在屏幕上。

我希望在中间垂直对齐，但是身体会改变高度，随着屏幕分辨率的变化，全屏布局，高度和宽度会随着观看者的屏幕分辨率降低而改变或者增加。

基本上我有。

<div id="center">
                <ul id="wrap">
                    <li><a href="#">In&iacute;cio</a></li>
                    <li><a href="#">Historico</a></li>
                    <li><a href="#">Comissao Organizadora</a></li>
                </ul>
            </div><!--menu-->

我试过使用margin-top:50%, margin-bottom:50%但没有成功。

Answer 1

检查此jsfiddle演示

<div id="center">
    <ul id="wrap">
        <li><a href="#">In&iacute;cio</a></li>
        <li><a href="#">Historico</a></li>
        <li><a href="#">Comissao Organizadora</a></li>
    </ul>
</div>

CSS样式

html, body, #center {
    height: 100%;
    position:relative;
    margin:0px;
    padding:0px;
}
#center #wrap {
    margin:0px;
    padding:0px;
    height: 50%;
    position: absolute;
    top: 50%;
    left:40%;
}