html - 垂直对齐具有动态主体高度和宽度的div

Question

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

我想在中间垂直对齐，但是 body 会随着屏幕分辨率的变化而改变高度，它是全屏布局，高度和宽度会随着观众屏幕分辨率的降低而变化或增加。

基本上我有。

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