垂直对齐与动态身体高度和宽度

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

检查这个小提琴演示

<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%;
}