垂直对齐视口的50%

Question

无论文档有多长，我都试图将视口的div与50%垂直对齐。

你可以在这里看到一个例子http://fancyapps.com/fancybox/#examples

Answer 1

框偏移属性可以用来获得这种效果。

此属性指定绝对定位长方体顶部的距离边距边缘偏移到框的包含的顶部边缘以下块

来源：http://www.w3.org/TR/CSS2/visuren.html#position-道具

---

jsfiddle

CSS

#centered {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    height: 200px; /* arbitrary */
    width: 600px; /* arbitrary */
    background-color: grey;
}

Answer 2

这里有一个jQuery示例，它将使div居中，而不管它的高度和宽度如何。

演示http://jsfiddle.net/kevinPHPkevin/dzSPN/120/

function animateHight(newHeight){
    $('div#centered').animate({'height': newHeight, 'margin-top': -newHeight/2}, 600, function(){animateWidth(100);animateHight(100);});
}
function animateWidth(newWidth){
    $('div#centered').animate({'width': newWidth, 'margin-left': -newWidth/2}, 600);
}