CSS Absolute Position Won't Work with Margin-Left:Auto Margin-Right: Auto

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

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.

Position absolute and margin: auto

Since you know the width of the footer (1100px), you can just do a left:50%;margin-left:-550px to center it.

Example: Centering an absolutely positioned element

http://jsfiddle.net/vdWQG/

Therefore, footer would become:

#footer
{
    width: 1100PX;
    height: 50px;
    position: absolute;
    bottom: 0;
    left:50%;           /* Add this */
    margin-left:-550px; /* Add this (this is half of #footers width) */
    background-color: #282828;
}

If you want the element to stick on the bottom of the page as the user scrolls down, use position: fixed instead of position:absolute

Why magin:auto is not enough to center position absolute or fixed?

You need to refer to the specification to understand this. If your element is not positionned using position:absolute then you need to consider this section where you can read:

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

For in-flow elements, only margin is needed in addition to the width.

When it comes to position:absolute elements we refer to this section

If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0

It's clear that if you don't see any left, right or width, margin will get computed to 0 (no centring)

If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values

When you set left, right and width the margin will get equal values (that we can found with the formula) and you will have centring.

If you continue reading you can also see:

Otherwise, set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.

So we only get a centring effect for margin if we set left, right and width. omiting one will not center the element.

Below an example to illustrate the 8 different cases like detailed in the specification.

.box {  height:50px;  border:1px solid;  position:relative;  margin:5px;}.box > div {  position:absolute;  left:0;  right:0;  margin:auto;  width:200px;  background:red;  color:#fff;}

<div class="box">  <div>some text</div></div><div class="box">  <div style="width:auto;">some text</div></div><div class="box">  <div style="left:auto">some text</div></div><div class="box">  <div style="left:auto;width:auto">some text</div></div><div class="box">  <div style="right:auto">some text</div></div><div class="box">  <div style="right:auto;width:auto;">some text</div></div><div class="box">  <div style="right:auto;left:auto;">some text</div></div><div class="box">  <div style="right:auto;left:auto;width:auto;">some text</div></div>

CSS: margin-right and absolute positioning

Its not margin-right you are looking for it is just right

Please see from my fiddle update:
JSFIDDLE right

And if you want it to sit at the bottom of the screen add bottom

Try this updated fiddle: JSFIDDLE bottom

Margin-right does not work because it add margin to the div area itself, while right is a position value.

If you look at the box model it shows you where the margin is added to. So Margin is really used to give the box space from other objects around itself.

Why does position: absolute; left: 0; right: 0; width: XYpx; margin: 0 auto actually center?

This is accounted for in section 10.3.7 of the CSS2.1 spec:

The constraint that determines the used values for these elements is:
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values [...]

As you can see, auto margins on both sides behave the same for absolutely-positioned elements as they do for non-positioned block-level elements, provided that the left and right offsets, as well as width, are not auto.

Interestingly, only for absolutely-positioned elements, this applies to top, height and bottom as well, which essentially means that it is possible to vertically center an absolutely-positioned element using auto margins. Again, this is provided that the three properties above are not auto, and the respective margins are auto. (In your case, this means margin: auto rather than margin: 0 auto as the latter zeroes out the vertical margins.)

Align element to right with margin-left: auto

Auto margins in flexbox overrides default alignment. This article explains.
Putting auto margins on an inline element such as a <span> will be ignored. The auto margin works on block elements and it'll be apparent if it's smaller than the element that contains it. If it isn't given any width, then by default a block element is 100%. See Snippet.

SNIPPET

div {  width: 400px;  background: #eee;}
span {  margin: 0 0 0 auto;  display: block;  width: 100px;  border: 1px dashed red;}

<div>  <span>test</span></div>

Can not align absolute div in center

left: auto; right: auto won't work like margin: 0 auto for centering the div, but you have a fixed width and you can just set the left property to half of what's left e.g. left: 5%

How can I center an absolutely positioned element in a div?

<body>  <div style="position: absolute; left: 50%;">    <div style="position: relative; left: -50%; border: dotted red 1px;">      I am some centered shrink-to-fit content! <br />      tum te tum    </div>  </div></body>

CSS Absolute Position Won't Work with Margin-Left:Auto Margin-Right: Auto