CSS absolute position won't work with margin-left:auto margin-right: auto
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?
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.
I've used this trick to center an absolutely positioned element. Though, you have to know the element's width
.
.divtagABS {
width: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
}
Basically, you use left: 50%
, then back it out half of it's width
with a negative margin
.
if the absolute element has a width,you can use the code below
.divtagABS{
width:300px;
positon:absolute;
left:0;
right:0;
margin:0 auto;
}
Working JSFiddle below.
When using position absolute, margin: 0 auto
will not work, but you can do like this (will also scale):
left: 50%;
transform: translateX(-50%);
Update: Working JSFiddle
I already had this same issue and I've got the solution writing a container (.divtagABS-container, in your case) absolutely positioned and then relatively positioning the content inside it (.divtagABS, in your case).
Done! The margin-left and margin-right AUTO for your .divtagABS will now work.