文本水平居中可以将text-align设置为center即可，垂直居中的话如果是单纯的设置vertical-align是没办法单独设置成功的，垂直居中的文字分为单行文本和多行文本，主要是两种不同的实现方式。

单行文本垂直居中

设置line-height和height高度一样即可:

.outer-line {        border: 1px solid red;        height: 200px;        line-height: 200px;        width: 200px;    }    
     
              博客园-FlyElephant    
     

多行文本垂直居中

通过table和table-cell的方式实现垂直居中：

     
        
      
                   博客园-FlyElephant 原文地址:http://www.cnblogs.com/xiaofeixiang/        
      
    
     

样式设置:

.outer-table {        border: 1px solid red;        height: 200px;        width: 200px;        margin-top: 20px;        display: table;    }        .inner {        display: table-cell;        vertical-align: middle;    }