浮动元素水平居中方法 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*水平居中一个浮动元素*/
 8         .floatDiv {
 9             float: left;
10             width:800px;
11             height:400px;
12             background: blue;
13             border:1px solid red;
14             position: relative;
15             margin-left: -400px;
16             left:50%;
17         }
18         /*水平并垂直居中一个绝对定位元素*/
19         .absoluteDiv{
20             position: absolute;
21             width:400px;
22             height:400px;
23             background: red;
24             left: 50%;
25             margin-left: -200px;
26             top:50%;
27             margin-top: -200px;
28         }
29     </style>
30 </head>
31 <body>
32     <div class="floatDiv"></div>
33     <div class="absoluteDiv"></div>
34 </body>
35 </html>

 

posted @ 2016-01-14 21:28  Farris  阅读(365)  评论(0)    收藏  举报