Question

I want to center a div, but at the same time be able to use something like top: 100px; in my code. Is this possible? I notice that if I say position: fixed; then the top/bottom styles will work, but margin-left: auto and margin-right: auto are disabled. How can I get both features at once? Thanks!

Answer 1

Depending on what you’re using this for, the easiest way might be to use two elements: an “invisible” one with fixed position and an inner element which is centered. Something like this:

http://jsfiddle.net/CCqUn/

<div>
    <p>Test</p>
</div>

div {
    position:fixed;
    top:100px;
    width:100%;
    height:0; /* In case of z-index issues; this element should be "hidden" */
}
div p {
    width:200px;   
    margin:0 auto;
    background:#CCC;
}