本文转载自：
@咸鱼老弟 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，手机端表现的比较好。