对文本垂直居中的一些方法记录

对文本垂直居中的一些方法记录

我们在写网页时不可避免的需要对文本进行排版，很多时候需要对文本进行居中处理，水平居中很好解决，几乎一条align:center就能解决多数情况，而垂直方向是我们此文的重点内容。

我们将从单行到多行，从外围块高度确定到不确定来分析，当然暂时不考虑图文混排的情况。

首先，单行固定高度：

我们只需要设置它的实际高度height和所在行的高度line-height相等即可。 

例如：

    
    
    
    
    


    

    
    
    

        
     
     
我是一段单行文本
    
    
    

效果如下：

当然为了保险起见，比如说文本太长，一个块宽度不够时，防止文本换行，我们可以使用overflow:hidden使其多出来的文本被隐藏，只是这也是一个缺点。

多行固定高度：

由于高度已定，我们还可以按照上面的方法，使各行的line-height值为块高除以行数：

    
    
    
    
    


    

    
    
    

    
     
     

        
      
      
我是第一段单行文本
        
      
      
我是第二段单行文本
        
      
      
我是第三段单行文本
        
      
      
我是第四段单行文本
    
     
     
    
    
    

效果如下：

CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。

注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：

    
    
    
    
    


    

    
    
    

    
     
     

        
      
      
我是第一段单行文本
        
      
      
我是第二段单行文本
        
      
      
我是第三段单行文本
        
      
      
我是第四段单行文本
    
     
     
    
    
    

效果如下：

可以发现文本是整体的（相当于多行的文本作为一个整体了）垂直的居中，感觉没有上面的方法使得文本之间距离也相等的功能。自己看需要来使用吧。

多行未知高度文本的垂直居中：

实际上是高度为自动的情况（因为高度未知也可能是设置了高度但自己不知道），这时我们可以使用上下的 padding值相同来实现：

    
    
    
    
    


    

    
    
    

        
     
     
我是第一段单行文本
        
     
     
我是第二段单行文本
        
     
     
我是第三段单行文本
        
     
     
我是第四段单行文本
    
    
    

效果如下：

个人感觉这种效果与使用table-cell差不多。