布局垂直居中的几种方法

今天去面试的时候，笔试第一题居然就是这个，并且当时还没写出来。所以这里自己网上找了些方法并测试了下，有以下几种方法

 

 1 <style> 
 2  .blank{height:20px;width: 100%;}
 3 
 4  .container1{width:1000px; height:200px; background-color: yellow;position: relative;}
 5  .box1 {width:100px; height: 100px;  background-color: red; position: absolute; top:0;bottom: 0; left: 0;right: 0; margin: auto;}
 6 
 7  .container2{width:1000px; height:200px; background-color: yellow;position: relative;}
 8  .box2 {width:100px; height: 100px;  background-color: red; position: absolute; top:50%; margin-top: -50px; }
 9 
10  .container3{width:1000px; height:200px; background-color: yellow; display: table;}
11  .box3 {width:100px; height: 100px;  background-color: red;display: table-cell; vertical-align: middle; }
12 
13   .container4{width:1000px; height:200px; background-color: yellow;}
14  .box4 {width:100px; height: 100px;  background-color: red; margin: auto;  }
15 
16   .container5{width:1000px; height:200px; background-color: yellow;}
17    .container5:after{display: inline-block; content: "";vertical-align: middle;height: 100%;}
18  .box5 {width:100px; height: 100px;  background-color: red; display: inline-block; vertical-align: middle; }
19 
20   .container6{width:1000px; height:200px; background-color: yellow;
21   display: -webkit-box;
22   display: -moz-box;
23   display: -ms-flexbox;
24   display: -webkit-flex;
25   display: flex;
26   -webkit-align-items: center;
27           align-items: center;
28   -webkit-justify-content: center;
29           justify-content: center;}
30  .box6 {width:100px; height: 100px;  background-color: red; }
31 </style> 
32 <div class="container1">
33     绝对对位原理：元素在过度受限情况下，将margin设置为auto，浏览器会重算margin的值，过度受限指的是同时设置top/bottom与height或者left/right与width。
34     <div class="box1">1、使用绝对定位垂直居中</div>
35     优点：支持响应式，只有这种方法在resize之后仍然垂直居中
36 　　缺点：不兼容IE567
37 </div>
38 <div class="blank"></div>
39 <style> 
40 </style> 
41 <div class="container2">
42     优点：代码量少、浏览器兼容性高支持ie6 ie7
43 　　缺点：不支持响应式(不能使用百分比、min/max-width)
44     <div class="box2">2、使用负marginTop</div>
45 </div>
46 <div class="blank"></div>
47 <style> 
48 </style> 
49 <div class="container3">
50     box不再是块元素，一般用于图片
51     优点：支持任意内容的可变高度、支持响应式
52 　　缺点：每一个需要垂直居中的元素都会需要加上额外标签（需要table、table-cell两个额外元素）
53     <div class="box3">3、table-cell方法</div>
54 </div>
55 <div class="blank"></div>
56 <style> 
57 </style> 
58 <div class="container4">
59     <div style="height:50%; width:100%; margin-bottom:-50px;"></div>
60     优点：兼容性好，支持IE567890
61     缺点：不支持响应式，需多加个节点
62     <div class="box4">4.借助额外元素</div>
63 </div>
64 <div class="blank"></div>
65 <style> 
66 </style> 
67 <div class="container5">
68     优点：支持响应式、支持可变高度
69 　　缺点：会加上额外标记 不兼容IE567
70     <div class="box5">5、将外层伪元素display设置为inline-block方式</div>
71 </div>
72 <div class="blank"></div>
73 <style> 
74 </style> 
75 <div class="container6">
76     <div class="box6">6、CSS3弹性盒式布局</div>
77 </div>

 

 

 

绝对对位原理：元素在过度受限情况下，将margin设置为auto，浏览器会重算margin的值，过度受限指的是同时设置top/bottom与height或者left/right与width。
1、使用绝对定位垂直居中
优点：支持响应式，只有这种方法在resize之后仍然垂直居中 　　缺点：不兼容IE567
 
优点：代码量少、浏览器兼容性高支持ie6 ie7 　　缺点：不支持响应式(不能使用百分比、min/max-width)
2、使用负marginTop
 
box不再是块元素，一般用于图片 优点：支持任意内容的可变高度、支持响应式 　　缺点：每一个需要垂直居中的元素都会需要加上额外标签（需要table、table-cell两个额外元素）
3、table-cell方法
 
 
优点：兼容性好，支持IE567890 缺点：不支持响应式，需多加个节点
4.借助额外元素
 
优点：支持响应式、支持可变高度 　　缺点：会加上额外标记 不兼容IE567
5、将外层伪元素display设置为inline-block方式
 
6、CSS3弹性盒式布局
posted @ 2016-03-01 01:01  yijinc  阅读(371)  评论(0)  编辑  收藏  举报