您的位置：首页 > 运维架构

两种方式让DIV上下左右都居中--经测试兼容IE,FF,Opera,Google Chrome

2009-09-22 13:01 681 查看
第一种：全CSS控制，层漂浮（适用于做登陆页面）

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" >
<head>
<title>居中Demo</title>
</head>

<mce:style type="text/css" title="currentStyle" media="screen"><!--
#divcenter{
position:absolute;/*层漂浮*/
top:50%;
left:50%;
width:300px;
height:300px;
margin-top:-150px;/*注意这里必须是DIV高度的一半*/
margin-left:-150px;/*这里是DIV宽度的一半*/
background:yellow;
border:1px solid red;
}
--></mce:style><style type="text/css" title="currentStyle" media="screen" mce_bogus="1">#divcenter{
position:absolute;/*层漂浮*/
top:50%;
left:50%;
width:300px;
height:300px;
margin-top:-150px;/*注意这里必须是DIV高度的一半*/
margin-left:-150px;/*这里是DIV宽度的一半*/
background:yellow;
border:1px solid red;
}</style>
</head>
<body>
<div id="divcenter">
this is a test
</div>
</body>
</html>


第二种：JS + CSS控制，不漂浮（适用于做登陆页面）

代码如下：

<html>
<head>
<title>DIV居中演示</title>
<mce:script type="text/javascript"><!--
function cen(){
var divname = document.all("testdiv");
//居中高度等于页面内容高度减去DIV的高度 除以2
var topvalue = (document.body.clientHeight - divname.clientHeight)/2;
divname.style.marginTop = topvalue;
}
//页面大小发生变化时触发
window.onresize = cen;
// --></mce:script>
</head>

<body style="height:100%; width:100%; text-align:center;" onload=cen()>
<div id = "testdiv" name="testdiv" style="margin:0 auto; border:1px solid red; height:400px; width:400px;">
DIV居中演示
</body>

</html>


最简单适用的一种　　上下左右都居中，兼容所有浏览器

<div style="position:absolute; top:50%; height:240px;border:1px solid red; margin:0 auto; margin-top:-120px; width:300px; left:50%; margin-left:-150px;"></div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航