Inline CSS Not Centering <div>

I have read other questions on stackoverflow about centering and have used this technique before.

I tried using:

<div style="width: 1000px; position: absolute; margin: 300px auto 0px auto;">
content in here
</div>

This did not center the div. What have I done wrong? I feel like I have used this code before, but it will 开发者_C百科not work this time. I tried making a new html file, and I tried it in case I had done something wrong on this particular page. It was flawed as well. How is it wrong?

Get rid of position: absolute.

jsFiddle.

BTW, it as nothing to do with the fact the styles are inline.

The auto margin trick doesn't work for elements that have absolute positioning. Try the following instead:

width: 1000px;
position: absolute;
top: 300px;
left: 50%;
margin-left: -500px;

This works by centring the LHS of the element using left: 50% then centering the element by using a negative margin of exactly half it's width.