CODEWITHSUNDEEP
htmlcssposition
user1118019
user1118019

Reputation: 3959

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?

Upvotes: 111

Views: 153538

Answers (9)

michaeljsalo
michaeljsalo

Reputation: 642

This issue can be confusing until you realize some nuances of different positionings.

Margins work similarly for relative and absolute elements, but margins are relative to a 'bounding box.' You have to consider what is the bounding box of the element, to apply margins against.

  • For a relative positioned element, the bounding box is its parent element.
  • For an absolute positioned element, the bounding box is itself.
  • For a relative positioned element, left/right/top/bottom rules position the element itself.
  • For an absolute positioned element, left/right/top/bottom rules position the element's bounding box.

This is why to center a relative positioned element, you only have to set margins and it works.

To center an absolute positioned element, you have to set the margins, and also set the bounding box (left/right/top/bottom).

Upvotes: 3

Baked Inhalf
Baked Inhalf

Reputation: 3735

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

Upvotes: 25

chipcullen
chipcullen

Reputation: 6960

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.

Upvotes: 72

Alex Vovchuk
Alex Vovchuk

Reputation: 2926

All answers were just a suggested solutions or workarounds. But still don't get answer to the question: why margin:auto works with position:relative but does not with position:absolute.

Following explanation was helpful for me:

"Margins make little sense on absolutely positioned elements since such elements are removed from the normal flow, thus they cannot push away any other elements on the page. Using margins like this can only affect the placement of the element to which the margin is applied, not any other element." http://www.justskins.com/forums/css-margins-and-absolute-82168.html

Upvotes: 2

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

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.

Upvotes: 211

GilbertSun
GilbertSun

Reputation: 620

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;
}

Upvotes: 41

Rafael Camargo
Rafael Camargo

Reputation: 36

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.

Upvotes: 1

Starx
Starx

Reputation: 78971

When you are defining styles for division which is positioned absolutely, they specifying margins are useless. Because they are no longer inside the regular DOM tree.

You can use float to do the trick.

.divtagABS {
    float: left;
    margin-left: auto;  
    margin-right:auto;
 }

Upvotes: -5

Codecraft
Codecraft

Reputation: 8296

If the element is position absolutely, then it isn't relative, or in reference to any object - including the page itself. So margin: auto; can't decide where the middle is.

Its waiting to be told explicitly, using left and top where to position itself.

You can still center it programatically, using javascript or somesuch.

Upvotes: -1

Related Questions