想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。
关于图片垂直居中显示，想必很多写css的人都研究过，或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法，用
font-size
解决IE下垂直居中的问题，是个好方法吗？是的，方法是不错，可是问题也很多：不支持
img
外标签的浮动，致使多图片排列时需添加额外标签；需要记住一些比例参数，上手较难；原理艰深，兼容性不稳定等。但是在我看来，这个方法不足够好！本文将提供两种更为新颖的方法，代码简洁，原理简单，上手容易，兼容性强，出错率低的方法。inline-block裸标签对齐法，以及透明图片拉伸对齐法。
css是如此的精深，我相信后来人会有更加绝妙的方法。但是，本文提供的几种实现图片垂直居中方法，一定是目前最实用的几种方法。
一、大小不固定，多行文字的垂直居中
① 单行文字
可能很多人都知道如何让单行文字垂直居中显示，就是使用
line-height
，将
line-height
值与外部标签盒子的高度值设置成一致就可以了。例如如下css代码：
height:3em; line-height:3em; …… 显示结果如下图：
② 多行文字
如何实现父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐呢？
实现的关键是把文字当图片处理。用一个
<span>
标签将所有的文字封装起来，设置文字与图片相同的
display
属性值（
inline-block
属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。
核心css代码如下，
外部
<div>
标签：
div{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;} 内部
<span>
标签：
span{display:inline-block; font-size:0.1em; vertical-align:middle;} 下面这张是实例演示页面的效果截图：
有几点简要说明：
- 此例子用
em
em
px
- 外部
div
- 外部
div
1.14
- 内部标签的
vertical-align:middle
div
1.5
- 系统原因，我没能够在IE8下测试。
实现的最终效果和JavaScript演示，您可以狠狠地点击这里去看看。
二、大小不固定，图片的水平垂直居中
① 透明gif图片+背景定位的方法
这里利用了
background-position:center
实现图片居中显示。这是个很实用也是很聪明的办法，对于维护控制成本都很不错。微软必应图片搜索的图片排列就是使用的这种方法。
方法的原理很简单，使用一个透明的gif图片做覆盖层，高宽拉伸至所需要的大小，然后给这个gif图片一个
background-position:center
声明。而
background-image
建议写在页面上，因为实际项目中，这肯定是个动态的URL地址，css文件似乎不支持动态URL地址。下面就是实例演示页面的效果截图。
核心HTML代码为：
<img src="../image/pixel.gif" style="background-image:url(mm1.jpg);" /> 其中此img标签已经设置了高宽和背景居中定位的属性。具体实现可以可以狠狠地点击这里进行参照。
② display:table-cell和文字大小控制居中
这个方法可以说就是本文综述部分提到的淘宝团队想出的图片垂直居中的方法。但是本文展示的这个方法的css代码又不是淘宝工程师们的原版代码，我对其做了一定的修改，把里面没有用可以剔除的hack都去掉了。
css代码部分：
<img>
外部
<div>
标签：
div {display:table-cell; width:1em; height:1em; font-size:144px; width:144px; height:144px; font-size:118px; border:1px solid #beceeb; text-align:center; vertical-align:middle;}/*这里的大小是根据高宽上限128像素图片设置的*/ img标签：
img{vertical-align:middle;} 需要说明的：
1.原版的代码中有两个hack，一个是针对文字大小的，另外一个是针对
block
属性的；后经过我测试推敲后证实这两个hack都是多余的，而
*display:block
更是多余，因为IE6,IE7根本就不认识
display:table-cell
是谁！
2.这个通过文字大小控制IE下图片垂直居中是个很不错的方法，要比使用
position:relative
这类高消耗的css方法要好多了。但是这个方法不足之处在于：不支持
<img>
外标签的浮动，所以当多图片显示时需要再在外面嵌套一层标签——资源消耗多了！
3.高度：文字大小=1.14，这个比例我一直记着，但是后来我将这个比例的概念淡化了，原因在于多次遇到其他比例实现效果的情况。例如上面，就是1:1实现的。
③ display:inline-block和文字大小控制居中
此方法的灵感来自于Google picasa相册的图片显示，代码相当简洁，是个成本很低，效果惊人的方法。适用于多图显示的情况。基本上用裸标签就实现了想要达到的效果。一般而言，图片阵列排列显示的时候，外面都有一个a标签的，起到链接的作用。而本处的方法就只要这一个
<a>
标签就足以实现图片垂直且居中的显示效果。其关键是将
<a>
标签默认的
inline
属性值设置为inline-block，这样
<a>
标签既支持宽度，又支持
vertical-align:middle
，配合
<img>
的
vertical-align:middle
就可以实现图片的水平垂直居中显示了。
css代码：
<a>
标签：
a{display:inline-block; width:1.2em; font-size:128px; text-align:center; vertical-align:middle;} img标签：
img{vertical-align:middle;}