CSS实现div居中

 1     <!DOCTYPE html> 
 2     <html> 
 3     <head> 
 4     <meta charset="utf-8" /> 
 5     <title>CSS实现div居中</title> 
 6     <style> 
 7     /*外层div居中*/
 8     #main {
 9         position: absolute;        /*极为重要*/
10         background-color: blue;
11         width:400px;
12         height:200px;
13         left:50%;
14         top:50%; 
15         margin-left:-200px;
16         margin-top:-100px;
17         border:1px solid #00F;
18     } 
19  
20     #content {
21         position: absolute;        /*极为重要*/
22         background-color: yellow;
23         width: 200px;
24         height: 100px;
25         left:50%;
26         top:50%; 
27         margin-left:-100px;
28         margin-top:-50px;
29         
30         /*div内部文字居中*/
31         text-align: center;
32         line-height:100px;        /*行间距和div高度相同*/
33     }
34     </style> 
35     <body> 
36         <div id="main">
37             <div id="content">
38                 Sun
39             </div>
40         </div> 
41     </body> 
42     </html>
posted on 2014-04-17 14:49 Shower稻草人阅读(1768) 评论(2) 收藏举报