Hjælp til at centrere lightbox

Jeg har kastet mig ud i at prøve at lave en light box :-)
Det eneste jeg mangler er at lightboxen er centreret på siden.

Hvis jeg bruger "position: absolute;" eller "position: fixed;" står den helt ude til venstre, og hvis jeg bruger "position: relative;" kommer den til at ligge nederst på siden, ned under fooder, så man skal scrolle for at komme end til den, dog er den centeret..

@charset "utf-8";
/* CSS Document */

.backdrop
{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: .0;
    filter: alpha(opacity=0);
    z-index: 50;
    display: none;
    background-color: #000;
}

.box
{
    position: relative;
    top: 100px;
    margin-right: auto;
    margin-left: auto;
    width: 500px;
    height: 300px;
    background: #ffffff;
    z-index: 51;
    padding: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 5px #444444;
    -webkit-box-shadow: 0px 0px 5px #444444;
    box-shadow: 0px 0px 5px #444444;
    display: none;
    border: thin solid rgba(0,0,0,1);
}

.close
{
    float:right;
    margin-right:6px;
    cursor:pointer;
}


<div class="backdrop"></div>
<div class="box">
    <div class="close"><img src="_pic/icon_close_lightbox.png" width="42" height="42"></div>
        This is the lightbox!!!
</div>