Question

How would I vertically center a modal window, but also keep a 20px distance from the edges at Top & Bottom?

Here is what I have currently:

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

It creates a 20px margin on top, but none on bottom. Why is that?

Thanks!

Answer 1

The Fiddle : http://jsfiddle.net/BZKHq/1/

The 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>

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