Css 垂直居中div，但也有20px的余量Top&；底部

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

以下是我目前的情况：

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

它在顶部创建一个20像素的边距，但在底部没有。为什么呢

谢谢

小提琴：

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>

Lorem或任何使你的ipsum悲伤的知识或任何使你的ipsum悲伤的知识或任何使你的ipsum悲伤的知识或任何使你的ipsum悲伤的知识或任何使你的ipsum悲伤的知识

Lorem ipsum和其他东西。。。

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

#覆盖{
颜色：白色；
背景色：黑色；
position:absolute；/*容器的位置设置对绝对定位元素的行为有影响。为什么不制作一个JSFIDLE来显示您的问题。为什么不使用缩写：
margin:20px
？