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

Question

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

这是我目前拥有的：

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

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

谢谢！

Answer 1

小提琴：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;
}