一、大小不固定，多行文字的垂直居中
① 单行文字
如何让单行文字垂直居中显示，大部分都知道使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了。
示例css样式为：height:3em; line-height:3em;
② 多行文字
可是对于外框高度固定，文字大小不固定的多行文字呢？
文字可一行显示，也有可多行显示；可以是小号字体，也有的是大号的。这时候如何让其垂直居中显示呢？例子如下：
多行文字垂直居中
HTML结构如下：
复制代码 代码示例:
div class="zxx_align_box_2"><span class="zxx_align_word">这里显示多行文字。</span></div>
css代码如下：
复制代码 代码示例:
.zxx_align_box_2{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;} .zxx_align_box_2 span.zxx_align_word{display:inline-block; font-size:0.1em; vertical-align:middle;}
就是把文字当图片处理。用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。
有几点简要说明：1.此例子用em做单位，如果您对em单位了解不够，把握不来的话，可以使用px做单位，值要换；2.外部div不能使用浮动；3.外部div高度和文字大小比例1.14为宜；4.内部标签的vertical-align:middle可以省略，但是外部div高度和文字大小比例要修改。
这里翻出一篇原来的文章：http://www.jb200.com/article/8240.html，有兴趣的朋友，不妨参考下。
二、大小不固定，图片的垂直居中
① 透明gif图片+背景定位
这里利用了background-position:center实现图片居中显示。这是个很实用办法，控制成本很不错。。
很简单，使用一个透明的gif图片做覆盖层，高宽拉伸至所需要的大小，然后给这个gif图片一个background-position:center center的属性。而background-image建议写在页面上，实际项目中是个动态的url地址，css文件似乎不支持动态URL地址。下面就是此方法的实例。
复制代码 代码示例:
HTML部分：
<ul class="zxx_align_box_3 fix"> <li> <img src="../image/pixel.gif" style="background-image:url(http://image.jb200.com/image/study/s/s128/mm1.jpg);" /> </li> </ul>
css部分：
.
复制代码 代码示例:
zxx_align_box_3 li{width:1em; height:1em; padding:0.1em; margin:0 0.1em 0 0; font-size:128px; float:left; border:1px solid #beceeb;} .zxx_align_box_3 li img{display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center;}
② display:table-cell和文字大小控制居中
这个方法确实不错！但是下面展示是修改版，去掉了没有必要的hack。
HTML部分：
复制代码 代码示例:
<ul class="zxx_align_box_4 fix"> <li> <div><img src="http://image.jb200.com/image/study/s/s128/mm1.jpg" /></div> </li> </ul>
css部分：
复制代码 代码示例:
.zxx_align_box_4 li{float:left; margin-right:13px;} .zxx_align_box_4 li div{display:table-cell; width:144px; height:144px; border:1px solid #beceeb; font-size:118px; text-align:center; vertical-align:middle;} .zxx_align_box_4 li div img{vertical-align:middle;}
说明：
1.原版的代码中有两个hack，一个是针对文字大小的，另一个是针对block属性的；后来证实这两个hack都是多余的，而*display:block更是多余，因为IE6,IE7根本就不认识display:table-cell。
2.这个由文字大小控制IE下图片垂直居中是个不错的方法，但不足之处在于：不支持img外标签的浮动，所以当多图片显示时需要再在外面嵌套一层标签——资源消耗多了！
3.高度：文字大小=1.14，还有其他比例实现效果的情况，上面就是1:1实现的。
4.这个方法巧妙的应用了IE默认文字空间的概念，但我想到了一种方法，将抽象默认文字空间的概念具体出来，实现了更加容易理解，更加方便使用，更加利于维护的新方法。
③ display:inline-block和文字大小控制居中
适用于多图显示的情况。只需要一层必须要的a标签就解决问题了！
HTML部分：
复制代码 代码示例:
<div class="zxx_align_box_5 fix"> <a href="#zhangxinxu"> <img src="http://image.jb200.com/image/study/s/s128/mm1.jpg" /> </a> <a href="#zhangxinxu"> <img src="http://image.jb200.com/image/study/s/s128/mm2.jpg" /> </a> </div>
css部分：
复制代码 代码示例:
.zxx_align_box_5 a{display:inline-block; width:1.2em; font-size:128px; text-align:center; vertical-align:middle;} .zxx_align_box_5 a img{vertical-align:middle; padding:2px; border:1px solid #beceeb;}
说明：
1.img外的标签需是a标签或span这类inline属性的标签，div标签也可以，但是css代码多些:display:inline; display:inline-block先变成inline属性，再转变成inline-block属性，原因讲起来又是一篇长长的文章，放着。
2.此方法只需要两层标签即可，可谓代码超简洁，但是只适用于多图垂直居中对齐的情况。因为其对齐原理是相邻的图片居中对齐，如果只是一个图片，vertical-align:middle就只有与空格对齐了。
④ 使用空白图片实现垂直对齐
HTML部分：
复制代码 代码示例:
<ul class="zxx_align_box_6 fix"> <li> <img class="show_img" src="http://image.jb200.com/image/study/s/s128/mm1.jpg" /> <img class="alpha_img" src="../image/pixel.gif" /> </li> </ul>
css部分：
复制代码 代码示例:
.zxx_align_box_6 li{height:128px; width:150px; padding:13px 0; float:left; margin-right:10px; border:1px solid #beceeb; text-align:center; font-size:0;} .zxx_align_box_6 li .alpha_img{height:100%; width:1px; vertical-align:middle;} .zxx_align_box_6 li .show_img{vertical-align:middle;}
简述：
将要显示的图片与一张透明的高度100%，宽度1像素的透明图片vertical-align:middle对齐。
其核心原理其实与第二种利用font-size大小实现IE下图片垂直居中是一致的。将font-size设置得很大，目的是撑开IE下默认文字空间的高度，其性质类似于空格，然后通过vertical-align:middle属性让图片与这个高高的空白空格空间垂直居中对齐；而这里将这个看不见的文字空间实例成一张透明的gif图片，高度可以轻松设置为外部标签的高度，然后通过vertical-align:middle对齐，就有效果了，在各个浏览器下都是一样的表现，不需要担心什么兼容性的问题。
>>> 查看更多 css 居中 相关教程 <<<
