We know that the position attribute of the DIV supports the percentage value for positioning. With this positioning capability, we can locate the display coordinate of the DIV in the absolute center of the webpage, set the DIV to the width and height required by us through the margin attribute. Of course, we need to use a negative number for the margin-top and margin-left attributes to move the DIV's position from the center to the right. In the following example, a vertical and horizontal center Div can be created on the page:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< Html Xmlns = "Http://www.w3.org/1999/xhtml" >
< Head >
< Meta HTTP-equiv = "Content-Type" Content = "Text/html; charsets = UTF-8" />
< Title > Vertical and horizontal center Div </ Title >
< Style Type = "Text/CSS" >
# Pageframe {
Position : Absolute ; // Set it to absolute positioning
Left : 50% ; // Set the display coordinate X
Top : 50% ; // Set the display coordinate Y
Width : 760px ; // Set the DIV width
Height:460px;// Set the DIV height
Margin-left:-Pixel PX; // Set this value based on the DIV width.
Margin-top : -230px ; // Set this value based on the DIV width.
Background : # Eee ;
}
</ Style >
</ Head >
< Body >
< Div ID = "Pageframe" > Vertical and horizontal center Div </ Div >
</ Body >
</ Html >
From: http://oneoo.com/articles/perfect-realization-of-the-level-of-intermediate-vertical-div.html