DIV垂直居中 (转)

 

第一种方法：

 1 < style  type ="text/css" >
 2<!--
 3#middle
 4{}{
 5       background:blue;
 6       position:absolute;
 7       left:expression((body.clientWidth-50)/2 + "px");
 8       top:expression((body.clientHeight-50)/2 + "px");
 9       width:50px;
10       height:50px;
11}
12-->
13 </ style >
14 < div  id ="middle"   align ="absmiddle" ></ div >   <!-- absmiddle 图像的中间与同一行中最大元素的中间对齐。
15 -->

说明:这段代码没有文档类型和命名空间的申明,我已试过,如果加上,蓝色方快儿将位于顶部且一部分被浏览器隐藏,大家可以试试!此外,FF不支持expression

第二种方法：

 1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 2 < html  xmlns ="http://www.w3.org/1999/xhtml" >
 3 < head >
 4 < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
 5 < title > DIV垂直居中 </ title >
 6 < style  type ="text/css" >
 7#menu
 8{}{
 9       position: absolute;
10       top: 50%;
11       left: 50%;
12       margin-top: -25px;
13       margin-left: -150px;
14       color:blue;
15       width: 300px;
16       height: 50px;
17       border:solid 1px gray;
18}
19 </ style >
20 </ head >
21 < body >
22 < div  id =menu > 页面水平垂直居中 </ div >
23 </ body >
24 </ html >

 

第三种方法：

 1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 2 < html  xmlns ="http://www.w3.org/1999/xhtml" >
 3 < head >
 4 < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
 5 < title > DIV垂直居中 </ title >
 6 < style  type ="text/css" >
 7#menu
 8{}{
 9       position: absolute;
10       top: 50%;
11       left: 50%;
12       margin-top: -25px;
13       margin-left: -150px;
14       color:blue;
15       width: 300px;
16       height: 50px;
17       font-weight:bold;
18       border:solid 1px gray;
19       line-height:50px;
20       font-size:20px; 
21       text-align:center;
22}
23 </ style >
24 </ head >
25 < body >
26 < div  id =menu > 页面水平垂直居中 </ div >
27 </ body >
28 </ html >