Fixed width div stays centered even when browser width < div width

Question

How do I center a div in a browser so it stays centered even when I make the browser width smaller than the div width?

I am currently using this:

BODY
{
text-align: center;
}
#wrapper
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}

But the left side of my browser blocks the div when I resize.

Answer 1

There is a dirty workaround for doing this:

#wrapper {
    width: 1000px;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -500px; /* width divided by 2 */
}

You may need to apply overflow: hidden to a parent element to prevent scrollbars.