How to make Vertical Centering Block Level Elements

Vertical Centering Block Level Elements

Positioning can be used to vertically center block level elements.

The HTML:

1	<div id="content">your content here</div>

The CSS:

1	div#content {position: absolute; top: 50%; height: 500px; margin-top: -250px}

The top left corner of the div will be positioned 50% from the top. Since we want the center of the div to be positioned 50% from the top you need to set a negative top margin equal to half the height of the div.

This same trick works for horizontal centering as well. Change top to left and margin-top to margin-left and set the negative margin to be half of the width of the element.

1	div#content {position: absolute; top: 50%; left:50%; width:800px; height: 500px;margin-left: -400px;  margin-top: -250px}

The above CSS will center the element both vertically and horizontally.