css 垂直水平居中总结

浏览数：34 / 时间：2015年06月09日

前言：

垂直居中有很多方式，我们要做的不是写出完美代码，而是在合适的情况下根据需求选择合适方式。

主要方式：

line-height
绝对定位
表格 display：table-cell

主要需求：

固定宽高
不固定宽高

主要兼容：

ie8+ 主流浏览器
ie6,7

行高

1. 利用行高与高度相同，实现单行文本居中

缺点：只能是单行文本

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6     .d1{width: 200px;height: 200px;background-color: blue;line-height: 200px;}
 7     </style>
 8 </head>
 9 <body>
10 <div class="d1">
11     fdsfdsfdsfdfsfds
12 </div>
13 </body>
14 </html>

View Code

效果预览

2.利用inline-block改进（推荐）

改变display属性，就可以是块元素了，vertical-align: middle;设置垂直属性

优点：自适应内容

兼容：>=ie8 + 主流

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <style type="text/css">
 7     .div1{
 8         width: 500px;height: 500px;
 9         background-color: blue;
10         text-align: center;
11         line-height: 500px;
12     }
13     .div2{
14         display: inline-block;
15         vertical-align: middle;
16         width: 200px;
17         height: 200px;
18         background-color: red;
19         /*通过 line-hight 来垂直居中  此法>= ie8*/
20     }
21 </style>
22 <body>
23     <div class="div1">
24         <div class="div2">
25 
26         </div>
27     </div>
28 </body>
29 </html>

View Code

效果预览

绝对定位

1.负margin

top，left 50%；margin -50%；

缺点：需固定宽高

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <style type="text/css">
 7     .div1{
 8         width: 500px;height: 500px;
 9         background-color: blue;
10         position: relative;
11     }
12     .div2{
13         position: absolute;
14         width: 200px;
15         height: 200px;
16         background-color: red;
17         top: 50%;
18         left: 50%;
19         margin-left: -100px;   /*此处为width的一半，所以应用此法，元素必须固定宽、高*/
20         margin-top: -100px;
21 
22     }
23 </style>
24 <body>
25     <div class="div1">
26         <div class="div2">
27             fdsfsdffdf
28             fdsfdsfsdff
29         </div>
30     </div>
31 </body>
32 </html>

View Code

效果预览

2.css3 translate

我们希望实现不固定宽高，在上法上改进。可以用js，动态添加宽高，但不推荐。其实可以用css3 translate属性，因为translate是唯一一个相对于自身宽度计算的属性

兼容：>=ie9 + 主流

优点：自适应内容

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <style type="text/css">
 7     .div1{
 8         width: 500px;height: 500px;
 9         background-color: blue;
10         position: relative;
11     }
12     .div2{
13         position: absolute;
14         background-color: red;
15         top: 50%;
16         left: 50%;
17         transform:translate(-50%,-50%); 
18         /*应用css3 translate属性是相对于自身的，此法>=ie9，且宽高自适应*/
19     }
20 </style>
21 <body>
22     <div class="div1">
23         <div class="div2">
24             fdsfsdffdf
25             fdsfdsfsdff
26         </div>
27     </div>
28 </body>
29 </html>

View Code

效果预览

3.绝对定位 + 相对定位（推荐）

思想与上面的方式是一样，只是这是基于ie6,7的bug，相对定位位移父元素的50%

缺点：多添加一个容器标签

优点：自适应内容

兼容：ie6,7

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         .middle-demo-4{
 7         background-color: blue;
 8         height: 300px;
 9         width: 300px;
10         position: relative;
11         }
12         .middle-demo-4 div{
13         position: absolute;
14         top: 50%;
15         left: 50%;
16         }
17         .middle-demo-4 div div{
18             height: 200px;
19             background-color: red;
20         position: relative;
21         top: -50%;
22         left: -50%;
23         }/*ie6 ie7*/
24     </style>
25 </head>
26 <body>
27 <div class="middle-demo-4">
28     <div>
29         <div>dsfdsfdsfdsfdsfdsfdsf</div>
30     </div>
31 </div>
32 
33 </body>
34 </html>

View Code

效果预览

4.margin：auto

绝对定位下，固定宽高，top：0，bottom：0，会自适应内容，多余部分会用margin填充

缺点：固定宽高

兼容：>=ie8

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <style type="text/css">
 7     .div1{
 8         width: 500px;height: 500px;
 9         background-color: blue;
10         position: relative;
11     }
12     .div2{
13         margin: auto;
14         position: absolute;
15         background-color: red;
16         width: 200px;
17         height: 200px;
18         left: 0;
19         right: 0;
20         top: 0;
21         bottom: 0;
22 
23     }
24 </style>
25 <body>
26     <div class="div1">
27         <div class="div2">
28             fdsfsdffdf
29             fdsfdsfsdff
30         </div>
31     </div>
32 </body>
33 </html>

View Code

结果预览

表格

1.table-cell（推荐）

单元格可以设置垂直属性 vertical-align: middle;

优点：自适应内容

兼容：>=ie8 +主流

缺点：子元素为浮动、绝对定位无效（注意）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <style type="text/css">
 7     .div1{
 8         width: 500px;height: 500px;
 9         background-color: blue;
10         display: table-cell;
11         vertical-align: middle;
12         text-align: center;
13     }
14     .div2{
15     /*float: left;position: absolute; 子元素为浮动、绝对定位无效
16         此法>=ie8
17     */}
18 </style>
19 <body>
20     <div class="div1">
21         <div class="div2">
22             fdsfsdffdf
23             fdsfdsfsdff
24         </div>
25     </div>
26 </body>
27 </html>