negative margin

Negative top and left margins move the element up and left while negative right and bottom margins make following siblings move left and up.

This technique allows to center a absolutely positioned element. The left outer edge of the box is first aligned with the center of the positioning block (left:50%;), then the negative margin (which is half the width of the box) aligns the box in the center of the positioning block.

Here the positioning block is the viewport, hence it is the viewport’s width that is used to calculate the ‘width’, ‘left’, and ‘margin’ of the yellow box.

If we were positioning the box absolutely rather than relatively, then the width used to compute the ‘width’, ‘left’, and ‘margin’ values would be the width of the parent container instead of the width of the viewport.

Style the wrapper of these boxes (div.markup) with:

	position: relative;

Style the yellow box with:

	position: static;

Try These

Watch This

aqua
yellow
pink

Check This

<div id="aqua">aqua</div> <div id="yellow">yellow</div> <div id="pink">pink</div>

Edit This

Use shift + enter to create new lines (even in Safari and Chrome).