之前是用expression,但有性能问题,然后网上查了一下,找到下面的方法
<!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>div 居中</title>
<style type="text/css">
.centerdiv {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -150px !important;
width:300px;
height:200px;
border:1px solid #0000ff;
}
</style>
</head>
<body>
<div class="centerdiv ">i'm the center DIV</div>
</body>
</html>
这个div的x坐标为内容显示部分的50%,y坐标为内容显示部分的50%,显示出来的然而这样的话只能说这个div的起点是在正中间,我们需要的是将整个div显示在正中间,所以给margin-left:-150px;(这里的150是从width属性中得来的它是等于width的一半,对应的margin-top也是通过通样的方法得来的。)这样就会把整个div的宽度分一半到左边就可以让其水平居中了,在设置margin-top:-100px;是同样的道理,会将整个div的高度分一半到上面显示。就形成了整个div在浏览器的正中间显示。
!important 是必须的,不然div会向右上方偏移,不清楚怎么个情况,知道的童鞋可以帮解释一下。
在chrome、ff、ie下测试通过。
原文链接:http://kevinpeng.iteye.com/blog/786625