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