多行文本垂直居中

1.单行文本的垂直居中

div {   
  height:25px;   
  line-height:25px;   
}

2.多行文本高度不固定的居中

div {   
  padding:25px;   
}

3.多行文本的高度固定居中

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

<head>    
    <title> 多行文字实现垂直居中 </title>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
    <style type="text/css">    
      body { font-size:12px;font-family:tahoma;}    
        div#wrap {    
        height:400px; 
        width: 400px;   
        display:table;    
      }    
      div#content {    
        vertical-align:middle;    
        display:table-cell;    
        border:1px solid #FF0099;    
        background-color:#FFCCFF;    
         width: 400px;     
      }    
    </style>    
  </head>    
  <body>    
    <div id="wrap">    
      <div id="content">现在我们要使这段文字垂直居中显示！    
        现在我们要使这段文字垂直居中显示！    现在我们要使这段文字垂
      直居中显示！    现在我们要使这段文字垂直居中显示！ 
     现在我们要使这段文字垂直居中显示！    
      </div>    
    </div>    
  </body>

4.多行文本高度固定兼容性问题

在Internet Explorer 6及以下版本中，在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的高度，而从父元素继承来的定位高度）。

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


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

1.利用line-height实现多行文本居中

每行文字都有一个line boxes包裹，具体大小由line boxes决定。其实line boxes不是直接的生产者，属于中层干部，真正的活儿都是它的手下 – inline boxes干的，这些手下就是文字啦，图片啊，span之类的inline属性的标签啦。
line boxes只是个考察汇报人员，考察它的手下谁的实际line-height值最高，谁最高，它就要谁的值，然后向上汇报，形成高度。例如，<span style="line-height:20px;">取手下line-height<span style="line-height:40px;">最高</span>的值</span>。则line boxes的高度就是40像素了。

如下图所示，右边的空格是为了撑开div，给span添加inline-box是为了是元素具有单行效果，只有一个inline box；

Paste_Image.png

.mulit_line{line-height:150px; border:1px dashed #cccccc; padding-left:5px;}
.mulit_line span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;}
.mulit_line i{width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle; font-size:0;}

<p class="mulit_line">
    <span style="font-size:12px;">这里是高度为150像素的标签内的
   多行文字，文字大小为12像素。
   <br />这里是第二行，用来测试多行的显示效果。</span><i> </i>
</p>

2.同理实现图片的居中