元素绝对居中终极办法兼容IE8 

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             .parent {
 9                 text-align: center;
10                 display: table-cell;
11                 vertical-align: middle;
12             }
13             
14             .child {
15                 display: inline-block;
16             }
17         </style>
18     </head>
19 
20     <body>
21         <div class="parent">
22             <div class="child">DEMO</div>
23         </div>
24     </body>
25 
26 </html>

很容易便能看出，这其实是inline-block水平居中方案以及table-cell垂直居中方案的合用，也算是把文本排版的特性都利用了个遍了。

posted @ 2017-01-07 18:05  向着太阳生  阅读(2223)  评论(0)  编辑  收藏  举报