起因
流量GO第二版首页改进的时候遇到图片垂直居中的问题。自己是用margin这种方式解决的，但是当浏览器缩小及页面滚动的时候出现了一些意想不到的结果，然后被狠狠鄙视了一顿。解决问题的方法有很多种，要找最好的，还有，投机取巧的方法要不得（每一句代码都要心安理得啊！），代码只会越写越烂。。。
绝对定位和-webkit-box
//水平居中
position: absolute;
top :0;
left: 50%;
-webkit-transform: translate(-50%,0); //transform属性有rotate()旋转 / skew()倾斜 / scale()比例 /translate(,)位移
//使用box-align和box-pack属性，居中div框的子元素垂直居中 display: -moz-box;
display: -webkit-box;
display: -o-box;
display: box;
-ms-flex-align: center;
-moz-box-align: center;
-o-box-align: center;
-webkit-box-align: center;
align-items: center;
height: 100%; 但是在公司自己的流量充值页面搭建过程中，要求浏览器兼容到IE7，上面的垂直居中方案显然是不可行的。
浏览器支持 目前没有浏览器支持box-align属性。 Firefox支持替代的-moz-box-align属性。 Safari、Opera及Chrome支持替代的-webkit-box-align属性。
display: table
所以在那个项目中，实现垂直居中的方案是使用display:table
#outer {
display:table;
height:400px;
#position:relative;
overflow:hidden;
}
#middle {
display:table-cell;
vertical-align:middle;
#position:absolute;
#top:50%;
}
#inner {
#position:relative;
#top:-50%;
}
<div id=”outer”>
<div id=”middle”>
<div id=”inner”>
<!–这里是要垂直居中的内容–>
</div>
</div>
</div>
最大的问题:IE浏览器的Bug。 IE7及其以下的旧版IECSS中的display:table之类的表格方式声明 解决办法:让大部分能理解display:table声明的浏览器使用vertical-align属性达到垂直居中，让IE7及以下版本用自己理解高度的Bug来解决居中问题。
IE Bug: IE7及以下版本理解高度的Bug:如果a容器内有b对象，a容器并没有设置高度值，如果b对象有实际内容(如文字)，那么就会将a的高度理解为与b相等。那么如果对b采取相对定位，b就会相对于在a中的原始位置移动(主要利用百分比高度)。 eg:a未定义高度，b的高度为100px，将b相对定位，并设top:-50% 在这种情况下:标准浏览器由于未知a的高度,所以b不动。而IE7及以下版本则会让b相对a的高度(其实等于b的高度)上移50%，也就是50px。
hack
①在每个CSS属性前加一个下划线”_”，这个hack是专门针对IE6及以下版本的，也就是说IE7无法理解。如:_position:absolute; ②.在属性前加”#”的声明正好可以仅让IE7及以下版本理解，而其它任何浏览器都无法理解这个”#”，所以”#”后的声明就会被其它浏览器忽略掉。
display:table方式实现垂直居中，参考访问,感谢作者。