html - center aligning a fixed position div

Question

I'm trying to get a div that has position:fixed center aligned on my page.

I've always been able to do it with absolutely positioned divs using this "hack"

left: 50%; width: 400px; margin-left:-200px

...where the value for margin-left is half the width of the div.

This doesn't seem to work for fixed position divs, instead it just places them with their left-most corner at 50% and ignores the margin-left declaration.

Any ideas of how to fix this so I can center align fixed positioned elements?

And I'll throw in a bonus M&M if you can tell me a better way to center align absolutely positioned elements than the way I've outlined above.

Answer 1

Koen's answer doesn't exactly centers the element.

The proper way is to use CCS3 transform property. Although it's not supported in some old browsers. And we don't even need to set a fixed or relative width.

.centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}

Working jsfiddle comparison here.