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水平垂直居中顯示:

lefttop設置爲50%來定位div到瀏覽器中央,再將margin-leftmargin-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.         bordersolid 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/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章