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中內容水平居中