css系列（布局）：实现一个元素在浏览器中水平、垂直居中的几个方案

在开发中偶遇需要一个元素垂直居中的需求，之前都是水平居中，垂直居中使用的比较少，经过一通研究，选择了几种相对比较实用的方案分享，抛砖引玉，如有遗漏不足，还望不吝指正。

方案一（IE7下该方案无法实现垂直居中）：

通过设置父级的的块属性实现，将父级元素手动转换位display:table-cell属性，然后使用表格的vertical-align: middle属性，实现元素的垂直居中，子元素继续使用margin:0 auto;实现水平居中即可

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         .container{
12             width: 500px;
13             height: 500px;
14             display: table-cell;
15             vertical-align: middle;
16             background: green;
17         }
18         .box{
19             width: 100px;
20             height: 100px;
21             background: #f00;
22             margin: 0 auto;
23         }
24     </style>
25 </head>
26 <body>
27 
28 <div class="container">
29     <div class="box"></div>
30 </div>
31 </body>
32 </html>
View Code

 方案二（IE7下该方案无效）：

使用position:absolute,设置left、top、bottom、right、margin的属性

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         .box{
12             width: 100px;
13             height: 100px;
14             background: #f00;
15             position: absolute;
16             top: 0;
17             left: 0;
18             bottom: 0;
19             right: 0;
20             margin: auto;
21         }
22     </style>
23 </head>
24 <body>
25 <div class="box"></div>
26 </body>
27 </html>
View Code

 方案三（完美兼容）：

使用position:absolute,设置left、top、margin-left、margin-top的属性，这种方法基本浏览器都能够兼容，不足之处就是需要固定宽高。

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         .box{
12             width: 100px;
13             height: 100px;
14             background: #f00;
15             position:absolute;
16             top:50%;
17             left:50%;
18             margin-top:-50px;
19             margin-left:-50px;
20         }
21     </style>
22 </head>
23 <body>
24 <div class="box"></div>
25 </body>
26 </html>
View Code
posted @ 2016-07-13 16:29  星际实验室  阅读(938)  评论(0)  编辑  收藏  举报