javascript - 垂直对齐 50% 的视口

Question

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

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

Answer 1

Box offsets 属性可用于获得此效果。

此属性指定绝对定位的框的上边距边缘在框的包含块的上边缘下方偏移多远。

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

---

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