任意高度图片垂直居中、多行文本垂直居中

说到垂直居中，有人会想到CSS中的vertical-align属性，但是这厮是个挑食的家伙，只对一些特定显示样式（如：table-cell 表格显示方式等）才起作用，所以像div、span这样的标签vertical-align对他们是不起作用的！那div这样的标签如何实现让内容垂直居中呢？

一、固定高度单行文本垂直居中
固定高度单行文本垂直居中就简单了，只需设置父元素的高度值与line-height行高设置一样就可以了。如 height:30px; line-height:30px;

二、未知高度多行/单行文本垂直居中
这个也很简单，只需要给父元素设置个padding且上下数值一样就可以了。如 padding:10px;

三、固定高度多行文本垂直居中
实现方法：把文本内容的父元素的display属性设置成table-cell，就可以了。当然IE6是不认识table/table-cell属性是什么东东的。现在这时代IE6估计占的份额不会大了，如果必须要兼容可以使用CSShack
代码示例：
p { display:table-cell;width:150px; height:200px; border:1px solid red; vertical-align:middle; }
<p>
这里面放内容呀放内容。这里面放内容呀放内容。这里面放内容呀放内容。这里面放内容呀放内容。
</p>

四、大小不固定图片水平垂直居中
实现方法：给图片加一个兄弟行内标签，如span、i 标签等等。给这个行内标签设置inline-block，并高度拉伸至100%就可以了。
代码示例：
div { height:100px; width:100px; border:1px solid red; text-align:center; }
div span { display:inline-block; height:100%; width:0; vertical-align:middle;  }
div img { vertical-align:middle;  }
<div>
<img src="xxx" />
<span></span>
</div>

到此结束喽，如有不正确的地方欢迎指正！