DIV+CSS页面布局——页面居中

总结一下，DIV+CSS的布局，居中布局的几个方案。

 

 

 

方案1：

1. #div
2. {
3.     width:450px;
4.     height:600px;
5.     background-color:#FF0000;
6.     position:absolute;
7.     left:50%;
8.     margin-left:-225px;
9. }

 

这样，该容器的左边距将从页面的50％的宽度开始算起；

然后，将容器DIV的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点。

 

--------------------------------------------------------------------

 

方案2：

1. #div
2. {
3. •     width:450px;
   •     height:600px;
   •     background-color:#FF0000;
4.     text-align:center；
5. }

 

这个的缺点是，DIV容器中的所有子元素都会居中。

 

--------------------------------------------------------------------

 

方案3：

1. #div
2. {
3.     width:450px;
4.     height:600px;
5.     background-color:#FF0000;
6.     margin:0 auto;
7. }

这个方案用的比较多，但是不支持IE6以下的浏览器。

 

 

--------------------------------------------------------------------

 

方案4：

1. body
2. {
3.     text-align:center;
4. }
5. #div
6. {
7.     width:450px;
8.     height:600px;
9.     background-color:#FF0000;
10.     margin:0 auto;
11.     text-align:left;
12. }

 

这个方案是方案2和方案3的完美结合，最大的兼容所有的浏览器。