指月玄光

to be better for you love

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

一、前言:


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

主要方式:

  1. line-height
  2. 绝对定位
  3. 表格 display:table-cell

主要需求:

  1. 固定宽高
  2. 不固定宽高

主要兼容:

  1. ie8+  主流浏览器
  2. 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>
View Code

结果预览

 

五、总结


 

根据兼容性和自适应内容来考虑         表格/行高法 + 相对定位法

如果固定宽高                                 负margin法

posted on 2014-10-04 11:40  李三思  阅读(269)  评论(0编辑  收藏  举报