css absolute position won't work with margin-left:auto margin-right: auto

user1118019 picture user1118019 · Apr 3, 2012 · Viewed 114.6k times · Source

Say you have the following css applied to a div tag

.divtagABS {
    position: absolute;
    margin-left: auto;  
    margin-right:auto;
 }

the margin-left and margin-right does not take effect

but if you have relative, it works fine i.e.

,divtagREL {
position: relative;
margin-left: auto;  
 margin-right:auto;
}

why is that? i just want to center an element

can someone explain why setting margins to auto in absolute position does not work?

Answer

Kevin Bowersox picture Kevin Bowersox · Apr 3, 2012

EDIT : this answer used to claim that it isn't possible to center an absolutely positioned element with margin: auto;, but this simply isn't true. Because this is the most up-voted and accepted answer, I guessed I'd just change it to be correct.

When you apply the following CSS to an element

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

And then give the element a fixed width and height, such as 200px or 40%, the element will center itself.

Here's a Fiddle that demonstrates the effect.