div css page layout centered_html/css_WEB-ITnose

If you want to center the entire page top and bottom, they must be a whole. I added a class to the

tag so that the two parts of the body are truly included in one whole. Next, set up the overall :

.mainLayout {    position :absolute;    left : 50%;    top : 50%;    width : 910px;    margin-top : -270px;    margin-left : -455px;}

This is achieved using absolute positioning and negative margin values. .

left:50% will cause the entire mainlayout container to be displayed from the horizontal midpoint of the browser to the right. At this time, the left half of the browser is empty.

Then set margin-left to half of the mainlayout container, and set it to a negative value to allow the container to move to the left, that is, move the entire container from the center of the browser to the left (mainlayout container) itself half. In this way, the mainlayout container can be displayed centered on the left and right.

The principle of upper and lower centered display is the same: first top: 50% to make the container display downward from the midpoint of the vertical direction, leaving half of the space above. Then move half of the mainlayout container up so that it is vertically centered.

Original link: http://my.oschina.net/suyewanwan/blog/110784