How to vertically center a dynamic height fixed element?

Question

I'm making an overlay window thing and I'm trying to vertically center the message in the center of the screen.... this is my CSS thus far:

#overlay {
    position: fixed;
    right: 0;
    left: 0;
    width: 276px;
    margin: 0px auto;
    padding: 12px 16px;
    font-size: 14px;
    color: #6d748b;
    background-color: #fff;
    border: 2px solid #b9c1d6;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;      
    z-index: 7500;
}

Answer 1

This is one way (assuming you're only trying to center one element):

#overlay {
    top: 50%;
   -ms-transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -o-transform: tranlslateY(-50%);
    transform: translateY(-50%);
}

Updated fiddle