CSS实现div居中

浏览数：22 / 时间：2015年06月09日 
 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>

 

CSS实现div居中,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class java 代码 html t id style src os c el class java 代码 html t id style src os c el

相关文章

随机文章

您可能还喜欢

您可能还喜欢