未知宽高的盒子垂直居中方法总结

已知宽高的盒子就不说了，说一下未知宽高的盒子水平垂直居中方法及优缺点，目前有3种。

htm代码及公共css代码

<div class="box">
	<div class="all-item item">item</div>
</div>
           

.box{width:500px;height:500px;background-color: #ddd;}
.all-item{padding:50px;} /*由于模拟的是未知宽高的元素，所以这里用padding撑起，而不是写死宽高*/
           

1.使用display:flex盒子模型

.item{background-color: yellow;}
.box{display:flex;justify-content:center;align-items:center;}
           

此方法，谷歌/火狐/ie10及以上支持，但是对ie浏览器版本要求低的就不行了

2.绝对定位和transform结合

.box{position:relative;}  
.item{background-color: blue;position:absolute; left:50%; top:50%;transform:translate(-50%,-50%);}
           

谷歌/火狐/ie9及以上支持，少数公司对ie浏览器本版要求很高，要兼容到ie8，这个就不可以了，还有一个问题就是，transform加前缀 -webkit-/-o-/-moz-/-ms- ， 这个有些争议，因为现在大部分浏览器在不加前缀的情况下一样可以呈现效果，只是以前各大浏览器版本低的情况下需要加，所以有些人会在保险起见，给加上，ie9以下版本即使加上-ms-前缀也不会生效

3.display:table/display:table-cell

.box{display:table;}
.item{background-color: black;display:table-cell; text-align:center; vertical-align:middle;}
           

谷歌/火狐/ie8及以上支持，兼容到ie8已经满足绝大部分公司需求了，缺陷：item会铺满box，如果item有背景色或者背景图片，就不行了

综上所述，在这个万恶的ie时代，个人认为第三种方法还是比较靠谱的，当然也看个人需求吧！