the first one: full CSS control, floating layer (applicable to do the landing page)
code is as follows:


<% @ page language="Java" import="Java. Util. *" pageEncoding="utf-8" % >
<! PUBLIC DOCTYPE HTML "-///DTD/W3C HTML 4.01 Transitional//EN" >
<Html>
<Head>
<Title> My JSP
<Meta HTTP - equiv="pragma" content="no - cache" >
<Meta HTTP - equiv="cache-control" content="no - cache" >
<Meta HTTP - equiv="expires" content="0" >
<Meta HTTP - equiv="keywords" content="keyword1, keyword2, keyword3 >"
<Meta HTTP - equiv="description" content="this is my page" >
<Style type="text/CSS" ># divcenter {

position: absolute;/* layer floating */
top: 50%;
left: 50%;
width: 300 px;
height: 300 px;
margin - top: - 150 px;/* note that there must be a DIV half height */
margin - left: - 150 px;/* this is half the width of DIV */
background: yellow;
border: 1 px solid red; }
</style>
</head>
<Body>
<Div id="divcenter >" This is a test </div>
</body>
</html>

the second: javascript + CSS control, does not float (applicable to do the landing page)
code is as follows:


<% @ page language="Java" import="Java. Util. *" pageEncoding="utf-8" % >
<! PUBLIC DOCTYPE HTML "-///DTD/W3C HTML 4.01 Transitional//EN" >
<Html>
<Head>
<Title> My JSP
<Meta HTTP - equiv="pragma" content="no - cache" >
<Meta HTTP - equiv="cache-control" content="no - cache" >
<Meta HTTP - equiv="expires" content="0" >
<Meta HTTP - equiv="keywords" content="keyword1, keyword2, keyword3 >"
<Meta HTTP - equiv="description" content="this is my page" >
<The script type="text/javascript" >
function cen () {
var divname=document. All (" testdiv ");
//center height is equal to the page content height minus the height of the DIV divided by 2
var topvalue=http://www.jb51.net//web/(document. Body. ClientHeight - divname. ClientHeight)/2;
divname. Style. MarginTop=topvalue;

}//page size changes trigger window.
onresize=cen;
</script>
</head>
<Body style="" height: 100%; width: 100%; text - align: center;" Style="margin: 0 auto; border: 1 px solid red, height: 400 px; width: 400 px;" >
DIV centered demonstrate
</div>
</body>
</html>

the third: one of the most simple is centered around both sides of compatible with all browsers
code is as follows:


<Div style="position: absolute; top: 50%; height: 240 px; border: 1 px solid red; margin: 0 auto; margin - top: - 120 px; width: 300 px; left: 50%; margin - left: - 150 px;" ></div>

other methods:
code is as follows:


<Html>
<Head>
<Meta HTTP - equiv="content-type" Content="text/HTML; charset=gb2312"/>
<Title> </title>
<Style type="text/CSS" >
img_v {
display: table - cell! Important;
display: block;
position: static! Important;
position: relative;
overflow: hidden;
width: 400 px;
height: 400 px;
border: 1 px solid # 000;
vertical - align: middle;
text - align: center;

} img_v p {
display: table - cell! Important;
display: block;
margin: 0;
position: static! Important;
position: absolute;
top: 50%;
left: 50%;
width: 400 px;
margin - left: auto;
margin - right: auto;

} img_v img {
position: static! Important;
position: relative;
top: auto!!! Important;
top: - 50%;
left: auto!!! Important;
left: - 50%;
}
</style>
</head>
<Body>
<Div class="img_v >"
<P> <Img SRC="http://www.script-home.com/images/logo.gif" ></p>
</div>
</body>
</html>


This concludes the body part