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>
