一、大小不固定，多行文字的垂直居中
① 单行文字
可能很多人都知道如何让单行文字垂直居中显示，就是使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了。例如： 单行文字居中显示测试，css样式为：height:3em; line-height:3em;……
② 多行文字
但是对于外框高度固定，文字大小个数不固定的多行文字呢？文字可能一行显示，也有可能多行显示；文字可能是小号字体，也有可能是大号的。这时候如何让其垂直居中显示呢？看下面！ 这里的文字用来做多行文字垂直居中对齐的测试。
这是第二行文字，您还可以再添加一行文字做测试！
这是隐藏的第三行文字，注意到文字的变化没，依旧垂直居中。
上面所展示的就是多行文字垂直居中的效果！
HTML结构如下：
css代码如下：
实现的原理：
说白了，就是把文字当图片处理。用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。有几点简要说明：1.此例子用em做单位，如果您对em单位了解不够，把握不来的话，可以使用px做单位，值要换；2.外部div不能使用浮动；3.外部div高度和文字大小比例1.14为宜；4.内部标签的vertical-align:middle可以省略，但是外部div高度和文字大小比例要修改，我自己试了一下，高度比字体1.5左右的样子；5.系统原因，我没能够在IE8下测试。
对于一些细化的原理，将在图片垂直居中处讲一下。二、大小不固定，图片的垂直居中
① 透明gif图片+背景定位
这里利用了background-position:center实现图片居中显示。这是个很实用也是很聪明的办法，对于维护控制成本都很不错。微软必应图片搜索的图片排列就是使用的这种方法。 方法的原理很简单，使用一个透明的gif图片做覆盖层，高宽拉伸至所需要的大小，然后给这个gif图片一个background-position:center center的属性。而background-image建议写在页面上，因为实际项目中，这肯定是个动态的URL地址，css文件似乎不支持动态URL地址。下面就是此方法的实例表现。HTML部分（仅示例一张图片，其他重复，故略）：
据说这个方法是淘宝的工程师想到的，确实是不错的方法！但是下面展示的却不是原版，而是我的修改版，去掉了没有必要的hack。
HTML部分（仅示例一张图片，其他重复，故略）：
1.原版的代码中有两个hack，一个是针对文字大小的，另外一个是针对block属性的；后经过我测试推敲后证实这两个hack都是多余的，而*display:block更是多余，因为IE6,IE7根本就不认识display:table-cell是谁！
2.这个通过文字大小控制IE下图片垂直居中是个很不错的方法，要比使用position:relative这类高消耗的css方法要好多了。但是这个方法不足之处在于：不支持img外标签的浮动，所以当多图片显示时需要再在外面嵌套一层标签——资源消耗多了！
3.高度：文字大小=1.14，这个比例我一直记着，但是后来我将这个比例的概念淡化了，原因在于多次遇到其他比例实现效果的情况。例如上面，就是1:1实现的。4.这个方法巧妙的应用了IE默认文字空间的概念，然而这个默认文字空间是看不见，摸不着的，较抽象，不好理解，使用者多记住用法，深层次原因不太理解，不易上手。但是，这里我要转折一下，我想到了一种方法，将抽象默认文字空间的概念具体出来，实现了更加容易理解，更加方便使用，更加利于维护的新方法，这就是最后一种方法。
③ display:inline-block和文字大小控制居中
这是我自己想到的方法，代码相当简洁，是个成本很低，效果惊人的方法，适用于多图显示的情况。只需要一层必须要的a标签就解决问题了！
HTML部分（仅示例两张图片，其他重复，故略）：
需要说明的：
1.img外的标签需是a标签或span这类inline属性的标签，div标签也可以，但是css代码多些:display:inline; display:inline-block先变成inline属性，再转变成inline-block属性，原因讲起来又是一篇长长的文章，放着。2.此方法只需要两层标签即可，可谓代码超简洁，但是只适用于多图