Div+CSS教程：实现div容器水平居中的方法小结

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

left:50%含意）；最后我们再从中间位置向左偏移回一半的距离来，这样就实现了水平居中了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div#wrap {
position:relative;
width:760px;
left:50%;
margin-left:-380px;
border:1px solid #333;
background-color:#ccc;
}
</style>
</head>
<body>
<div id="wrap">
在所有浏览器中都有效的方法：
<pre>
div#wrap {
position:relative;
width:760px;
left:50%;
margin-left:-380px;
border:1px solid #333;
background-color:#ccc;
}
</pre>
</div>
</body>
</html>

　　同样，在设定水平居中前你需要设定一个固定的宽度。

　　究竟选择哪个方法？
　　上面两个方法究竟选择哪种方法好呢？在第一种方法中貌似使用了Hack技术，其实并没有，它是中规中矩的Web标准写法，完全符合规范，因此，两个种方法中完全可以随便的选取其中的任一种进行使用，他们不存在CSS hack的问题。

三、其它的居中方式

　　上面所说的都是设定了具体宽度的情况下水平居中的实现。有时候我们想做一个弹性布局，或者当一个元素处于一个容器中时我们只想让它居中并不想设定一个具体的宽度。其实这并不是真正的居中布局，就像对一个100%长度的元素来说，你说它是居中对齐还是居左对齐呢？所以所有不高宽度的居中都不是真正的居中。这样的设计我们是使用的像元素的padding来设置的，实际中我们是改变了父元素的容器大小：
如我们希望wrap元素长度随窗口而改变，同时又维持居中，我们就可以这样写：
body {
padding:10px 150px;
}
　　这里，我们只需要保持父元素左右两侧的填充是相等的就可以了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
padding:10px 150px;
}
div#wrap {
border:1px solid #333;
background-color:#ccc;
}
</style>
</head>
<body>
<div id="wrap">
一种随浏览器窗口大小而改变的具有弹性的居中布局：
<pre>
body {
padding:10px 150px;
}
这里，我们只需要保持父元素左右两侧的填充是相等的就可以了。
</pre>
</div>
</body>
</html>

　　当然这只是“貌似居中”，不过却常常很有用处。

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

上一页 1 2

分享到：更多

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

上一篇: 怎样用CSS解决英文单词的自动换行的问题下一篇: CSS实现自动换行的小技巧

关于Div+CSS教程：实现div容器水平居中的方法小结的所有评论

随机推荐