DIV水平垂直居中显示

DIV水平居中显示：

定义div宽度后，设置{margin-left: auto; margin-right: auto;} 即可实现div水平居中，代码示例：

CSS：

1.             <style>  

2.             .cdiv {  

3.             width:200px;  

4.             margin-left:auto;  

5.             margin-right:auto;  

6.             }  

7.             </style> 

 HTML：

1.             <div class="cdiv">fufuok.com</div> 

－－－

DIV水平垂直居中显示：

将left和top设置为50%来定位div到浏览器中央，再将margin-left和margin-top值设置为宽和高的一半，使div居中显示。示例如下：

CSS： 

1.             <style>  

2.             .ccdiv {  

3.             position:absolute;  

4.             width:600px;  

5.             height:200px;  

6.             left:50%;  

7.             top:50%;  

8.             margin-left:-300px;  

9.             margin-top:-100px;  

10.         border: solid 5px red;  

11.         }  

12.         </style> 

HTML：

1.             <div class="ccdiv">fufuok.com</div> 

－－－

两个DIV水平垂直居中显示：

CSS：

1.             <style>  

2.             .div1 {  

3.             position:absolute;  

4.             background:#FF6600;  

5.             width:500px;  

6.             height:100px;  

7.             left:50%;  

8.             top:50%;  

9.             margin:-50px 0 0 -400px;  

10.         }  

11.         .div2 {  

12.         position:absolute;  

13.         background:#006699;  

14.         width:300px;  

15.         height:100px;  

16.         left:50%;  

17.         top:50%;  

18.         margin:-50px 0 0 100px;  

19.         }  

20.         </style> 

HTML：

1.             <div class="div1">-800/2</div> 

2.             <div class="div2">500-400</div> 

－－－div+css 水平居中 - div+css 垂直居中 - div中内容水平居中

 文章出处：http://blog.fufuok.com/