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

Inside the mechanics of positioning and margins

Get in-depth with the behaviors and interaction between different positioning values and margin configurations.

Horizontal centering alone

If you're looking to center your element horizontally only, top and bottom properties won't be required:

.center-abs-horizontal {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px; /* Who run the world? Width! */
}


Vertical centering

To center your element vertically, replace left and right properties with top and bottom respectively:

.center-abs-vertical {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 50px; /* Height matters, trust me! */
}


Rotate the transform way: Horizontal centering

Here's a stylish way of horizontally centering while considering element scaling–the magic word is transform:

.center-abs-transform {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 200px; /* How much space do we need? Just enough. */
}


Note that transform adjusts only the visual representation, not the layout size.

When margins alone fail

Auto margins can work wonders–but only within the normal document flow. When an element is absolutely positioned, it's yanked from this flow, making margins insufficient for centering.

Witness the magic: Practical demonstration

Grasping a visual concept can be a game changer. Use this JSFiddle link [http://jsfiddle.net/38tjjdpd/16/] to witness different techniques for centering with absolute positioning.

Going under the hood of absolute positioning

While wielding absolute positioning, elements sit relative to their closest positioned ancestor. In the absence of positioned ancestors, they take root to the viewport.

Between Relative and Absolute

The plot twist? margin: 0 auto; works like a charm when an element's position is set to relative. This is because relatively positioned elements stay within the normal document flow.

Looking out: Possible complications

Usage of absolute positioning comes with a caution note: Overlapping elements. This comes into picture especially when you shun fixed dimensions, or the viewport size gets tweaked.