CSS div up or down center

Usually we use the CSS layout is left and right center, the classic CSS syntax is as follows:

body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}
div{
    margin:0 Auto;
    width:500px;
    Height:auto;
}

The above is the classic left and right center of the CSS, then like the login box those smaller div block is just left and right center is not too beautiful, if the upper and lower left center this is

Most of the practices of the site, below is a more classic div right and left centered CSS notation:

body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}
div{
   Position:absolute;
   top:50%;
   left:50%;
  margin-top:-250px;
   margin-left:-250px;
    /* This width and height must be fixed */
    width:500px;
    height:500px;
}

The above margin can be combined: margin:-250px 0 0-250px;

The approximate principle is: layout needs position, absolute layout absolute or relative layout relative to look at the parent container, Top,left relative to the top and left are separated from the entire container of 50%, and then in the use of margin, back up div high 50% namely: margin-top:-250px

Back to left 50% of the div width is: margin-left:-250px

Okay, it's done.