代码改变世界

容器的垂直居中

2012-07-16 09:29  江苏黑马  阅读(209)  评论(0)    收藏  举报

效果：

原理：利用“绝对定位50%”和“负边距”
代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5 
 6         <title>index</title>
 7 <style>
 8     div#big {
 9         position: relative;
10         height: 300px;
11         width: 300px;
12         background-color: #ccc
13     }
14     div#small {
15         left: 50%;
16         margin-left: -100px;
17         position: absolute;
18         top: 50%;
19         height: 240px;
20         margin-top: -120px;
21         width: 200px;
22         background-color: #ff0
23     }
24 </style>
25     </head>
26 
27     <body>
28         <div id="big">
29 　　　　<div id="small">
30 　　　　</div>
31 　　</div>
32     </body>
33 </html>