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