css - 垂直居中 div，还有 20px 边距顶部和底部

Question

我如何垂直居中模态窗口，同时与顶部和底部的边缘保持 20 像素的距离？

这是我目前拥有的:

#colorbox, #cboxWrapper{position:absolute; top:20px; bottom:20px; left:0; z-index:9499;}

它在顶部创建了 20 像素的边距，但在底部没有。这是为什么？

谢谢!

Answer 1

fiddle :http://jsfiddle.net/BZKHq/1/

HTML:

<p>Lorem or whatever makes your ipsum dolorful Lorem or whatever makes your ipsum dolorful Lorem or whatever makes your ipsum dolorful Lorem or whatever makes your ipsum dolorful Lorem or whatever makes your ipsum</p>

<div id="overlay">Lorem ipsum and stuff...</div>

CSS

#overlay {
    color:white;
    background-color: black;
    position:absolute;    /* <<<--- The trick starts here ---<<< */
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin:20px;    /* <<<--- The trick ends here ---<<< */
    padding:20px;
    z-index: 10000;
}