大小不固定的图片、多行文字的水平垂直居中

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，可是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。
关于图片垂直居中显示，想必不少写css的人都研究过，或者说是搜寻过方法。淘宝团队彷佛提供了一种不错的方法， 用font-size解决IE下垂直居中的问题，是个好方法吗？是的，方法是不错，但是问题也不少：不支持img外标签的浮动，导致多图片排列时需添加额 外标签；须要记住一些比例参数，上手较难；原理艰深，兼容性不稳定等。可是在我看来，这个方法不足够好！本文将提供两种更为新颖的方法，代码简洁，原理简 单，上手容易，兼容性强，出错率低的方法。inline-block裸标签对齐法，以及透明图片拉伸对齐法。
css是如此的精深，我相信后来人会有更加绝妙的方法。可是，本文提供的几种实现图片垂直居中方法，必定是目前最实用的几种方法。

1、大小不固定，多行文字的垂直居中

① 单行文字
可能不少人都知道如何让单行文字垂直居中显示，就是使用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;}

下面这张是实例演示页面的效果截图：

行数不固定文字垂直居中对齐

有几点简要说明：
1.此例子用em作单位，若是您对em单位了解不够，把握不来的话，可使用px作单位，值要换；
2.外部div不能使用浮动；
3.外部div高度和文字大小比例1.14为宜；
4.内部标签的vertical-align:middle能够省略，可是外部div高度和文字大小比例要修改，我本身试了一下，高度比字体1.5左右的样子；
5.系统缘由，我没可以在IE8下测试。

实现的最终效果和JavaScript演示，您能够狠狠地点击这里去看看。

2、大小不固定，图片的水平垂直居中

① 透明gif图片+背景定位的方法
这里利用了background-position:center实现图片居中显示。这是个很实用也是很聪明的办法，对于维护控制成本都很不错。微软必应图片搜索的图片排列就是使用的这种方法。
方法的原理很简单，使用一个透明的gif图片作覆盖层，高宽拉伸至所须要的大小，而后给这个gif图片一个background- position:center center的属性。而background-image建议写在页面上，由于实际项目中，这确定是个动态的URL地址，css文件彷佛不支持动态URL 地址。下面就是实例演示页面的效果截图。

透明图片和背景定位实现图片水平垂直居中

核心HTML代码为：

<img src="../image/pixel.gif" style="background-image:url(http://image.zhangxinxu.com/image/study/s/s128/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实现的。

这里附上效果截图（取自IE6浏览器）：

table-cell和文字大小实现的图片垂直居中显示

图片和文字比不上直接的效果显示，因此建议您狠狠地点击这里。

③ 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;}

就这么简单，就实现了图片的垂直居中效果。下截图为证：

最精简的实现图片水平垂直居中显示的方法

另外补充说明的：img外的标签需是a标签或span这类inline属性的标签，div标签也能够，可是css代码多些: display:inline-block;*display:inline; zoom:1; IE下要先变成inline属性，再转变成相似于inline-block的属性，缘由讲起来又是一篇长长的文章，放着。

建议您狠狠地点击这里直接查看源代码

④ 透明图片拉伸对齐实现垂直居中显示
这个方法是我自认为至关不错的一个方法，说实话，想到这个方法是天然而然的，通过试验发现真的很管用。对比淘宝团队的方法，发现优点不少，基本上淘宝的table-cell+font-size方法会带来的些问题都避免了。
很是简单，很是易懂，出错率低，上手方便，兼容性上佳！

原理简述：
一句话，将要显示的图片与一张透明的高度100%，宽度1像素的透明图片vertical-align:middle对齐。
其核心原理其实与利用font-size大小实现IE下图片垂直居中是一致的。将font-size设置得很大，目的是撑开IE下默认文字空间的高度，其 性质相似于空格，而后经过vertical-align:middle属性让图片与这个高高的空白空格空间垂直居中对齐；而这里将这个看不见的文字空间实 例成一张透明的gif图片，高度能够轻松设置为外部标签的高度，宽度压缩至最小，而后经过vertical-align:middle对齐，就实现效果 了，因为影响布局的差很少就vertical-align:middle这一个属性，因此出现兼容性问题的可能性比table-cell的方法要低得多。
须要注意的：
1.img外容器宽度要大于要显示的图片的最大宽度+1像素；
2.img外容器的字体大小设为0px，也能够不设，可是两个img标签要连着写，避免空格；

如下是核心的一些代码：
HTML部分：

<li>
    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /><img src="../image/pixel.gif" />
</li>

css部分：

li{height:128px; width:150px; padding:13px 0; float:left; margin-right:10px; border:1px solid #beceeb; text-align:center; font-size:0;}
li .alpha_img{height:100%; width:1px; vertical-align:middle;}
li .alpha_img{height:100%; width:0; vertical-align:middle;}
li .show_img{vertical-align:middle;} 

其实，只要有上面绿色部分的css代码就足够了。
简单的超乎想象。

要显示的图片后面跟了一个高度撑满容器，只有1px宽，宽度为0便可，透明的图片。这两个图片分别vertical-align:middle，就实现了要显示的图片与这个拉伸的透明图片的居中对齐了，因为透明图片是透明的，不可见的，宽度也只有1像素宽度也为0，因此看上去就是要显示的图片相对于容器垂直居中了。

另外，其实这里不必定是透明的图片，使用任意的图片均可以，因此您其实说不定能够减小一次http请求，使用任意的图片将其拉伸至高度为容器高，宽度1像素宽度0就能够了。

甚至，使用span标签，div标签也能够实现一样的效果。只要将span标签或div标签转换成inline-block属性或相似于inline-block属性就能够了。
我我的更推荐使用行内元素，例如span，i标签等，只要应用相似下面的CSS：

span{display:inline-block; height:100%; width:0; vertical-align:middle;}

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

再提供一下实例页面的连接，狠狠地点击这里，实例页面的最后一种方法向您展现了这种新颖的图片垂直居中的方法。

最后，说句实在话，我知道这应该不算什么新颖的方法，在我以前想到这种方法的人确定不在少数，可是留迹于网上的却没有，我是没有发现过。我不清楚是 这些大牛的公司要求技术保密，仍是自身不肯分享研究成果。我相信不是这样的，主要仍是他们很忙碌，没有时间写这些东西。像我这样，”闲暇”的很，花十几个 小时写一篇文章的估计很少，呵呵。

补充于2009-11-03 15:32
正如我常常挂在嘴边的，css博大精深，你须要花费精力去观察它，研究它。这里，我再提供一种我刚刚试验出来的一种新方法，实现大小不固定的图片水平垂直 居中，综合来说，比上面全部提供的方法还要优秀，且没有hack，兼容性上佳（支持IE六、IE七、Firefox、chrome、Safari浏览器 -IE8未测（补充：我后来又测试了一下，结果在IE8浏览器和Opera浏览器下是不垂直居中的，全部此方法仍是有待商榷的）。下为在IE7下的效果截图：

此方法原理是，在IE下使用font-size使图片垂直居中显示，Firefox，chrome等现代浏览器使用line-height配合img自己 的vertical-align属性使垂直居中显示，因为二者不冲突，因此没有hack就实现的效果。css代码简洁明了，关键是HTML代码很是清晰， 一层外标签，里面就是img标签，我想很难再找出比这个方法更出色的让图片水平垂直居中的方法了。好吧，其实这个方法是有一点不完美的，就是opera浏 览器下图片没法垂直居中显示，幸亏国内而言，使用opera浏览器的比例很低，因此综合来说这个方法是个很是优秀的图片水平垂直居中的方法。

如下为css代码部分：

.zxx_ul_image li{float:left; width:150px; height:150px; text-align:center; line-height:150px; font-size:125px;}
.zxx_ul_image li img{vertical-align:middle;}

.zxx_ul_image li{float:left; width:150px; height:150px; text-align:center; line-height:150px; *font-size:125px;}
.zxx_ul_image li:after{content:' '; vertical-align:middle;}
.zxx_ul_image li img{vertical-align:middle;}

能够看到，代码很是简洁易懂，HTML部分代码就不上了，您能够单击下面的demo，里面有HTML代码的展现以及效果的预览。

建议您狠狠地单击这里：独立的demo实例页面