实现未知尺寸的图片在固定区域内水平、垂直居中

对于尺寸未知的图片在某个区域内垂直居中一直是不怎么好解决的前端问题，今天我给大家带来一个一劳永逸的偏方，具体如下;

先上代码：

<style>
.box{
width:400px; height:400px;

/*-----IE8及以上浏览器-----*/
text-align:center;
display:table-cell;
vertical-align:middle;
border:1px solid #40a211;

/*-----低版本IE hack-----*/
*display:block;

/*----字体大小=高度/1.14----*/
*font-size:350px;
}

.box img{
vertical-align:middle;
}
</style>

具体解决方案是给图片设置给字体大小，这里有个公式，图片字体大小 = 容器的高度/1.4