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-->
<style type="text/css">
2
<!--3
#middle4
{
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>
<!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
#menu8
{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>
<!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
#menu8
{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>
浙公网安备 33010602011771号