Why Does "Position: Absolute; Left: 0; Right: 0; Width: Xypx; Margin: 0 Auto" Actually Center

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.)

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.

What, exactly, is needed for margin: 0 auto; to work?

Off the top of my head:

1. The element must be block-level, e.g. display: block or display: table
2. The element must not float
3. The element must not have a fixed or absolute position¹

Off the top of other people's heads:

4. The element must have a width that is not auto²

Note that all of these conditions must be true of the element being centered for it to work.

---

¹ _{There is one exception to this: if your fixed or absolutely positioned element has left: 0; right: 0, it will center with auto margins.}

² _{Technically, margin: 0 auto does work with an auto width, but the auto width takes precedence over the auto margins, and the auto margins are zeroed out as a result, making it seem as though they "don't work".}

How to center absolute div horizontally using CSS?

You need to set left: 0 and right: 0.

This specifies how far to offset the margin edges from the sides of the window.

Like 'top', but specifies how far a box's right margin edge is offset to the [left/right] of the [right/left] edge of the box's containing block.

Source:
http://www.w3.org/TR/CSS2/visuren.html#position-props

Note: The element must have a width smaller than the window or else it will take up the entire width of the window.

You could use media queries to specify a minimum margin, and then transition to auto for larger screen sizes.

---

.container {
  left:0;
  right:0;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  width: 40%;

  outline: 1px solid black;
  background: white;
}

<div class="container">
  Donec ullamcorper nulla non metus auctor fringilla.
  Maecenas faucibus mollis interdum.
  Sed posuere consectetur est at lobortis.
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  Sed posuere consectetur est at lobortis.
</div>

Horizontally centre and bottom position image in a div

Horizontally center and vertically bottom divClick here

.parent {
  position: relative;
}

.img {
  width: 50px;
  height: 50px;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
}

Why does an absolute position element wrap based on its parent's right bound?

Doesn't position: absolute remove an element from the flow?

This has nothing to do with the flow. The width of an element always respects its containing block. If the element is absolutely positioned, then its dimensions can be constrained by top, right, bottom and left, but as long as its width is auto then it must still be constrained to the width of its containing block (making it no different from in-flow block boxes in that respect), which in your case is its absolutely-positioned parent. There isn't really any other element whose constraints the absolutely-positioned element could size itself with respect to without compromising the flow of its text.

For the specifics of how this width is calculated, refer to the spec.

Centering an icon on top of an element's border

You could use margin:0 auto; with position:absolute; - providing that you have some other values set:

.landing-section2 .landing-icon {
  position: absolute;
  top:-16px;
  right:0;
  bottom:0;
  left:0;
  width:50px;
  height:50px;
  margin:0 auto;
}

JSFiddle

Centering an icon on top of an element's border

You could use margin:0 auto; with position:absolute; - providing that you have some other values set:

.landing-section2 .landing-icon {
  position: absolute;
  top:-16px;
  right:0;
  bottom:0;
  left:0;
  width:50px;
  height:50px;
  margin:0 auto;
}

JSFiddle

---

Related Topics