未知寬高的盒子垂直居中方法總結

已知寬高的盒子就不說了，說一下未知寬高的盒子水準垂直居中方法及優缺點，目前有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時代，個人認為第三種方法還是比較靠譜的，當然也看個人需求吧！