假设下面的布局:
<body>
<div id="wrapper"></div>
</body>
有两种方法可以实现我们想要的效果
1.使用自动空白边让设计居中:
#wrapper { 720px;margin:0 auto;}
但是IE不支持自动空白边,幸运的是IE将text-align:center误解为让所有东西居中,所以可以利用这点来达到我们的要求
body{ text-align:center;}
#wrapper { 720px;margin:o auto;text-align:left;}
2. 使用定位和负值空白边让设计居中:
#wrapper{720px;position:relative;left:50%;margin-left:-360px;}
该样式首先定义容器的宽度,然后将容器的左边缘定位在页面的中间,最后在左边应用一个负值的空白边,宽度等于容器的一半,这样就把容器往左移动它的宽度的一半,从而达到居中的目的。
转载说明:
第二种做法针对<table>是不太合适的。它会让多个<table>重叠在一起。