css解决文字垂直居中

参考链接： http://www.cnblogs.com/lufy/archive/2012/09/12/2681972.html http://zhidao.baidu.com/question/69214815.html

对于文字的水平居中，text-align:center可以解决，垂直居中情况较复杂，分类讨论：

一、单行垂直居中

单行文本，如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如：

div{

height:100px;

line-height:100px;

overflow:hidden;

}

这段代码很简单，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。

不过在Internet Explorer 6及以下版本中，这和方法不支持对图片设置垂直居中

二、多行未知高度文字的垂直居中

如果一段内容，它的高度是可变的，那么我们设定Padding，使上下的padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把<div>完全填充的一种方式而已。可以使用类似下面的代码：

div {   
        padding:25px;   
        border:1px solid #FF0099;   
        background-color:#FFCCFF;   
        760px;   
      }

三、多行文本固定高度的居中

在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：

div#wrap {   
  height:400px;   
  display:table;   
}   
div#content {   
  vertical-align:middle;   
  display:table-cell;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  760px;   
}

<div id="wrap">   

    <div id="content">

      <pre>现在我们要使这段文字垂直居中显示！    
        div#wrap {    
          height:400px;    
          display:table;    
        }    
        div#content {    
          vertical-align:middle;    
          display:table-cell;    
          border:1px solid #FF0099;    
          background-color:#FFCCFF;    
          760px;    
       }    
      </pre>
  </div>    
</div>  
上面的方法ie8及以下都不支持，下面是完美解决兼容性问题的方法：

四、完美的解决方案

.outer {
  display:table; 578px; overflow:hidden; 
  background: #eee; height: 42px;
}
.middle {display:table-cell; vertical-align:middle; margin-left 10px;} 


<!--下面的CSS是针对IE8,IE7，IE6-->
<!--[if lte IE 8]>
<style>
.outer{position:relative;}
.middle{position: absolute; top: 50%;}
.inner{position: relative; top:-50%}
</style>
<![endif]-->

以上是样式！~

这里我们需要定义三个DIV：
外层(outer) 可以根据需要定义高度、宽度，但是display必须为table。
中间层(middle) 可以有特定的CSS样式，例如：margin-left，但是display必须为table-cell，vertical-align必须为middle。
内层(inner) 主要是用来对付IE6和IE7 Ie8的()。
有了上面的CSS，HTML代码可以这么写：

<div class="outer">
  <div class="middle">
    <div class="inner">
      把你要居中的文本放在这里
      这是第二行
      ...
    </div>
  </div>
</div>