用css让一个容器水平垂直

本文转载自：@咸鱼老弟 http://www.cnblogs.com/xianyulaodi/p/5863305.html

这种css布局平时用的比较多，也是面试题常出的一个题，网上一搜一大丢，不过还是想自己总结一下。

这种方法比较多，本文只总结其中的几种，以便加深印象。

效果图都为这个：

方法一：position加margin

 1 /**html**/
 2 <div class="wrap">
 3     <div class="center"></div>
 4 </div>
 5 
 6 /**css**/
 7 .wrap {
 8     width: 200px;
 9     height: 200px;
10     background: yellow;
11     position: relative;
12 }
13 .wrap .center {
14     width: 100px;
15     height: 100px;
16     background: green;
17     margin: auto;
18     position: absolute;
19     left: 0;
20     right: 0;
21     top: 0;
22     bottom: 0;
23 }

兼容性：主流浏览器均支持，IE6不支持

方法二： diaplay:table-cell

 1 <!-- html -->
 2 <div class="wrap">
 3      <div class="center"></div>
 4 </div>
 5 
 6 /*css*/
 7 .wrap{
 8     width: 200px;
 9     height: 200px;
10     background: yellow;
11     display: table-cell;
12     vertical-align: middle;
13     text-align: center;
14 }
15 .center{
16     display: inline-block;
17     vertical-align: middle;
18     width: 100px;
19     height: 100px;
20     background: green;
21 }

兼容性：由于display:table-cell的原因，IE67不兼容

方法三：position加 transform

 1 <!-- html -->
 2 <div class="wrap">
 3     <div class="center"></div>
 4 </div>
 5  
 6 /* css */
 7 .wrap {
 8     position: relative;
 9     background: yellow;
10     width: 200px;
11     height: 200px;}
12  
13 .center {
14     position: absolute;
15     background: green;
16     top:50%;
17     left:50%;
18     -webkit-transform:translate(-50%,-50%);
19     transform:translate(-50%,-50%);
20     width: 100px;
21     height: 100px;
22 }

 兼容性：ie9以下不支持 transform，手机端表现的比较好。