Reply To: Horizontally centering an absolute element

[Paulie_D]

As for a concept overview my reading is this

This property (TOP) specifies how far an absolutely positioned box’s top margin edge is offset below the top edge of the box’s containing block. For relatively positioned boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).

The same concept applies to the other properties but let’s just stick with top

So top:0 means the top edge of the positioned item will be positioned 0 pixels (I think the default is px or just insert your chosen units) away from the top edge of the containing block.

If we set top:10px it will be 10px below the top edge.

Now, when we set…

#somelement {
left: 0;
right: 0;
}

…we are actually saying that (absent any other instructions) the left and right edges of the absolutely positioned element must be 0 pixels away from the containing block’s respective sides.

When we set the element to position:absolute it makes the element (I think I’m right) automatically display:block which then defaults to 100% wide.

If we set a width…it will respect that, ditto max-width…and the margin:auto will center just like any other block level element.

If you don’t use the margin: auto..say like this

.child {
    position: absolute;
    right: 0;
    left: 0;
    width: 100px;
}

The natural text flow of the document (usually left aligned) takes over and the right:property is effectively ignored.