java 图片 文字居中_完美实现文字图片水平垂直居中

大神弄的CSS样式还是保存到自己这里看起来舒心，嘿嘿

垂直居中是一个历史悠久的大问题，要做到兼容所有浏览器少不了要花点时间，网上也流传了很多解决方案，但没发现比我现在用的方案更完美，至少在我的项目是如此。

项目中要用到垂直居中而碰到兼容性问题的，一般都是以下几种情况：

换行文字垂直居中

图片垂直居中

以上都是在固定宽高的容器里垂直居中，不然的话margin，padding便可实现。

解决垂直居中无非就从几个方面入手

利用行高等于容器高度

模拟表格单元格特性

定位布局

css3的display:box

换行文字垂直居中

方法1：结合表格单元格特性和定位来实现

CSS代码：

/*换行文字垂直居中*/

.vc-font1{border:1px solid black;width:200px;height:200px;display:table-cell;vertical-align:middle;text-align:center;}

/*兼容IE6、7*/

*+html .vc-font1{height:auto;min-height:200px;}

.vc-font1 .vc-fix{*position:relative;*top:50%;*left:50%;*width:100%;}

.vc-font1 .vc-inner{*position:relative;*top:-50%;*left:-50%;}

HTML代码：