在网页前台设计中，使整个页面居中对齐是现在比较流行的做法，如果是用table布局，使页面居中方法非常的简单。做法具体如下:
<table align="center"> </table>只需要让最外层表格的align属性为center即可，但是如果是css布局呢？这个问题恐怕困扰了很多css初学者吧，我现在就介绍一下方法。
在css中，有一个外边距margin属性，设置框与框之间的距离，如果能够让margin-left与margin-right的值相同，是不是整个页面就居中了呢，对，说做就做，现在开始动手了。
<html>
<head>居中对齐</head>
<style type="text/css" >
.center{ margin:0 auto; width:960px;}
</style>
<div class="center">这个层是居中的哦</div>
</html>
发现没有，居中了哦。但是如果你在IE中运行，发现没有，没有居中，这是怎么回事呢，原来IE把text-align属性识别为所有它子对象的对齐方式，而不是文本的对齐方式，所以要兼容IE，需要将定义改为如下：
body{text-align:center;}
.center{ margin:0 auto; width:960px; text--align:left; width:960px;}
如果使用这个办法，所有定义在最外层的Div都需要设置其margin属性，太麻烦了吧，有不有简单方法呢，当然有，请看下面：
html{ text-align:center;}
body{ margin:0 auto; text-align:left; width:960px;}
由于所有的Div元素都是放在body元素里面的，所以整个页面居中了。
但是又发现一个问题啊，当使用此方法的时候，就不能实现像淘宝网那样的页面顶角的登录框那种随着浏览器大小改变而不断变化的样式，因为body只有960px，如果浏览器窗口大于960px,问题就出来了，所以需要抉择哪种方法更好，当然常见的还有另外的一种方法，如下，具体原因由于篇幅我就不细讲了。
body{ text-align:center;}
.center{ width:960px; left:50%; margin-left:-480px; text-align:left;}
当然还有其他方法可以实现居中对齐，欢迎大家来交流经验，如果对本站的CSS有兴趣， 也可以查看源代码，然后参考。
扫一扫
415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
