css文本垂直居中

单行文本垂直居中

对于单行文本，我们只需要将文本行高(line-height)和所在区域高度(height)设为一致即可。

多行文本垂直居中

父级元素高度固定

css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，结合 display: table; ，可以使得div模拟table属性。因此我们可以设置父级div的display属性：display: table; ；然后再添加一个div包含文本内容，设置其 display:table-cell; 和 vertical-align:middle; 。

        .outer{   
            width: 500px;   
            height: 200px;   
            margin: 30px auto;   
            border: 1px solid red;   
            display: table;   
        }
   
        .inner{    
            display: table-cell;    
            vertical-align: middle;     
            text-align: center; /*设置文本水平居中*/     
            width:100%;      
        }