行内元素在块元素里垂直居中的方法

方法1： 设置块元素的 height,line-height为相同的值：

作用于单行文字，使文字垂直居中显示；

实现原理： line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。（可以包含这些内容的最小框就是行框。）实现了单行文字居中；

方法2：vertical-align

 适用于在块元素里存在大于一个行内元素需要垂直居中时（如图片和文字需要垂直居中显示时），可以通过对图片的标签或文字的标签（行内元素）设置vertical-align，可以达到效果；

vertical-align属性的定义：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

如：<div>

              <span></span>

              <img src="***">

     </div>

span {vertical-align: middle;}  表示图片的基线相对于span文字的垂直方向上的中部对齐；

方法3：设置display: table-cell;vertical-align: middle;达到垂直居中；

适用于在块元素内存在行内元素，块元素的混合元素时，且需要将它们垂直居中；

注：此方法存在兼容性问题；ie7和ie6都不能识别 display: table-cell;（但是支持display: block等css1的属性！） 
ie8以及以后版本可以识别；使用display:inline-block属性代替display:table-cell就完全ok的啦！

方法4： 绝对定位+负外边距；

使某个行内元素垂直居中，可以先绝对定位，设置top:50%,margin-top:-2/height;(假设元素在顶部；)