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> 

 

你可能感兴趣的:(div居中)