本文共 966 字，大约阅读时间需要 3 分钟。

1. 单行文字

可能很多人都知道如何让单行文字垂直居中显示，就是使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了

2. 多行文字

说白了就是把文字当图片处理。用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中，给外层容器添加table-cell和vertical属性即可

3. 透明gif图片+背景定位实现大小不定的图片垂直居中

方法的原理很简单，使用一个透明的gif图片做覆盖层，高宽拉伸至所需要的大小，然后给这个gif图片一个background-position:center center的属性。而background-image建议写在页面上，因为实际项目中，这肯定是个动态的URL地址，css文件似乎不支持动态URL地址

4. display:inline-block和文字大小控制居中

1.img外的标签需是a标签或span这类inline属性的标签，div标签也可以，只不过需要转成inline-block属性

2.此方法只需要两层标签即可，可谓代码超简洁，但是只适用于多图垂直居中对齐的情况。因为其对齐原理是相邻的图片居中对齐，如果只是一个图片，vertical-align:middle就只有与空格对齐了

5. 使用空白图片实现垂直对齐

一句话，将要显示的图片与一张透明的高度100%，宽度1像素的透明图片vertical-align:middle对齐

**其核心原理其实是将font-size设置得很大，目的是撑开IE下默认文字空间的高度，然后通过vertical-align:middle属性让图片与这个高高的空白空格空间垂直居中对齐；而这里将这个看不见的文字空间实例成一张透明的gif图片，高度可以轻松设置为外部标签的高度，然后通过vertical-align:middle对齐，就实现效果了，在各个浏览器下都是一样的表现，不需要担心什么兼容性的问题。而且代码很简单，很易懂，想出错都难！

相比图片而言，多了个display:inline-block; 但是会少一次链接请求。效果图和上面的一样的，完美的水平垂直居中。原理也与图片一样，相信很容易理解的