CSS网页布局：div水平居中的各种方法

作者佚名技术来源 CSS技术浏览发布时间 2012-03-05

#wrap {text-align:left;}

这样在Internet Explorer中我们就轻松实现了Div的居中对齐。因此要在所有的浏览器中显示居中的效果，我们就可以这样写我们的代码：

body { text-align:center; }
#wrap { text-align:left;
margin:0 auto;
}

<!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>
<title> CSS+Div实现水平居中对齐的页面布局 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { text-align:center; }
div#wrap {
text-align:left;
width:760px;
margin:0 auto;
border:1px solid #333;
background-color:#ccc;
}
</style>
</head>

<body>
<div id="wrap">
在Firefox等现代浏览器设定页面元素的水平居中，只要指定margin:0 auto;即可
<pre>
div#wrap {
width:760px;
margin:0 auto; /*这里的0可以任意值*/
border:1px solid #ccc;
background-color:#999;
}

在Internet Explorer 6 及以下的版本中我们还要做以下的设置：
body { text-align:center; }

div#wrap {
text-align:left;
}
</pre>
</div>
</body>
</html>

不过这里有一个前提，就是设置居中的元素要有固定的宽度，比如这里我们设定了为760像素。

二、相对定位与负的边距

对于wrap进行相对定位，然后使用负的边距抵消偏移量。这种方法比较简单还很容易实现：

#wrap {
position:relative;
width:760px;
left:50%;
margin-left:-380px
}

这段代码的意思是，设置wrap的定位是相对于其父元素body标签的，然后将其左边框移动到页面的正中间（也就是left:50%含意）；最后我们再从中间位置向左偏移回一半的距离来，这样就实现

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: 基于XTHML标准的DIVCSS布局对SEO的影响下一篇: dl,dt,dd标记在网页中要充分利用

关于CSS网页布局：div水平居中的各种方法的所有评论

随机推荐