HTML中 div垂直居中

参考:http://bbs.blueidea.com/viewthread.php?tid=1906314

 

比较简单的方法:

删掉:
<!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">
<body>
<div style="background:blue;position:absolute;left:expression((body.clientWidth-50)/2);top:expression((body.clientHeight-50)/2);width:50;height:50"></div>

 

比较复杂的方法:

<!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; charset=gb2312" />
<title>:::::::::16ue.cn:::::::::</title>
<style>
body {padding: 
0; margin: 0;}
body,html{height: 
100%;}
#outer {height: 
100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: 
static;}
#middle {position: absolute; top: 
50%;} /* for explorer only*/
#middle[id] {display: table
-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: 
-50%;width: 400px;margin: 0 auto;} /* for explorer only */
div.greenBorder {border: 1px solid green; background
-color: ivory;}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner" class="greenBorder">未知高度下的垂直居中
</div>
</div>
</div>
</body>
</html>

 

expression比较消耗资源,例子:

<input value="0" style="af:expression(value++);">

 

 

 

posted @ 2008-09-24 13:47  zhangsir  阅读(5547)  评论(0编辑  收藏  举报