垂直居中是一个历史悠久的大问题，需要时间才能与所有浏览器兼容。 虽然互联网上也流过很多解决方案，但我不知道它比我现在使用的解决方案更完美。 至少在我的项目中是这样。
在以下情况下，项目通常会遇到使用垂直中心的兼容性问题：
换行文本的垂直居中
图像垂直方向的中央
上述均位于固定宽度和高度的容器中垂直居中，否则可实现margin、padding。
解决垂直中心要从几个方面入手
利用容器高度以上的高度
模拟表格单元格的特性
布局配置
cs3的显示： box
换行文本的垂直居中
结合表格单元的特性和定位实现
/*换行字符垂直居中*
. vc-font1 {
border : 1px固态黑；
width: 200px；
高： 200 px；
display :表蜂窝；
垂直对准：米；
文本对齐3360中心；
}
/*ie6、7 */
* html .vc-font1 {
height :自动；
min-height: 200px；
}
. vc-font1 .vc-fix {
*位置： relative；
*top: 50%；
*left: 50%；
*width: 100%；
}
. vc-font1 .vc-inner {
*位置： relative；
*top: -50%；
*left: -50%；
}
如果换行符垂直居中，且与所有浏览器的兼容性文本的高度超过容器，识别table-cell的浏览器容器将进行自适应。 在这种情况下，容器的高度属性相当于最小高度，容器的高度将进一步Hack，以确保所有浏览器的效果一致。
缺点：增加了额外的标签
用内联块垂直对齐： middle实现
. vc-font2 {
border : 1px固态黑；
width: 200px；
高： 200 px；
文本对齐3360中心；
Overflow :隐藏；
}
. vc-font2 .vc-inner {
display :在线区块；
垂直对准：米；
}
. vc-font2 .vc-fix {
display :在线区块；
width: 0；
height: 100%；
line-height: 100%；
垂直对准：米；
可视：隐藏；
}
换行符垂直居中，与所有浏览器兼容
vc-inner和vc-fix必须是内联元素。 vc-inner加上vc-fix的宽度不能超过容器的宽度。 行内块换行时会产生更多间隙(可以删除容器font-size: 0，但此处不适用)。
缺点：额外的标签(硬伤)增加，标签不能换行，且必须是内联要素。
固定宽度高度图像垂直中央
上述垂直居中对齐换行符的方法也适用于固定宽度和高度图像的垂直居中对齐
利用定位(原理与方法1相似) )。
. vc-img1 {
border : 1px固态黑；
width: 200px；
高： 200 px；
position: relative；
}
. vc-img1 img {
width: 100px；
height: 100px；
位置： absolute；
top: 50%；
left: 50%；
margin: -50px 0 0 -50px；
}
既然确定了图像的宽度和高度，这种方法肯定没有兼容性问题
缺点：要计算照片边距的负值，必须固定照片的宽度和高度。
高于容器的高度
. vc-img2 {
border : 1px固态黑；
width: 200px；
高： 200 px；
line-height: 200px；
_font-size: 200px；
文本对齐3360中心；
}
. vc-img2 img {
width: 100px；
height: 100px；
垂直对准：米；
}
/*自己慢慢调整/*hack for ie7字体大小*
* html .vc-img2 {
font-size: 180px；
}
虽然以为在高于容器高度的高度设置行就结束了，但依然遇到了问题。 IE6不买无效，IE7也闹别扭，标签为同一行时无效。
在这里顺便推荐一个好用的位图网站。 好奇的童鞋猛戳链接吧：)
缺点：这样写不舒服
图像自适应容器宽度、高度、垂直中央
这个方法很简单。 根据方法4将图像的宽度高度更改为max-width，max-height。 代码如下。
. vc-img3 {
border : 1px固态黑；
width: 200px；
高： 200 px；
line-height: 200px；
文本对齐3360中心；
}
. vc-img3 img {
max-width: 150px；
max-height: 150px；
垂直对准：米；
}
/*自己慢慢调整/*hack for ie7字体大小*
* html .vc-img3 {
font-size: 180px；
}
很明显，这与IE6不兼容，要与IE6兼容就必须写JS。 对此，我只是该死的IE6！
cs3的显示： box
最后给出高端大气分级的方法。
. vc-css3 {
border : 1px固态黑；
width: 200px；
高： 200 px；
文本对齐3360中心；
显示：-WebKit-box；
-维基盒子- Align :中心；
-网络盒包：中心；
显示：-moz-box；
-moz-box-align:中心；
-moz-box-pack:中心；
显示：-o-box；
-邻盒对齐：中心；
-o-box-pack:中心；
显示：-ms-box；
-ms-box-align:中心；
-ms-box-pack:中心；
显示： box；
博克斯- Align 3360中心；
盒装：中心；
}
. vc-css3 img {
width: 100px；
height: 100px；
}
想在中间的话就在中间，好爽啊。
完美有树吗？ 如果IE能支持的话，又是该死的IE .