css+div布局中的垂直居中

     谈及垂直居中，在table布局的时代那是很轻松的。但是到了div布局中，很多人对此就比较迷茫了。下面来共同探讨一下关于垂直居中的问题。

1、单行文本垂直居中。

这个恐怕是大家遇到最多的情况了，也是最为简单的情况，很多地方都有讲到，在此就不详细讲解了。原理就是另文字行距等于div的高度即可。

2、多行文字垂直居中。

      这里讲的多行，就是不固定行数的文字。在table布局的时候，这是很容易实现的。但是在div布局中，十足为难了很多人。也有很多前辈想出了很多办法来解决。我认为比较好的一种方法应该是由淘宝团队提出来的，用font-size来解决。

<div class=”con”><span>IceSun-前端技术 http://www.iscss.tk</span></div>

我们需要设置con的高度和宽度，并且设置vertical-align:middle; display:table-cell;属性，最为重要的在这里要设置font-size的值。此处con的高度应等于font-size值的1.14倍。内部的span标签需要设置vertical-align:middle;display:inline-block; 其他的值按正常设置即可。

在这里做一下解释，vertical-align:middle;display:table-cell;是把div设置成表格，但是只有ie8和ff等浏览器才支持这一属性。对于ie6及ie7就要使用font-size来解决了。

有什么问题大家可以随时联系我，希望大家多多光临IceSun的前端技术博客www.iscss.tk

 

 

 

文章作者：IceSun
本文地址：http://www.iscss.tk/?p=94
版权所有 © 转载时必须以链接形式注明作者和原始出处！