三种常用垂直居中的方法

有时我们需要对元素内部内容进行垂直居中显示, 下面介绍三种我学到的简单的垂直居中方法

第一种: 利用td默认的vertical-align:middle特性达到多行文本垂直居中效果

　　CSS:

　　

    .wrap{
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }

 

　　HTML:

    <table class="wrap">
        <tr>
            <td>需要居中的内容需要居中的内容需要居中的内容需要居中的内容需要居中的内容需要居中的内容需要居中的内容<td>
        </tr>
    </table>

 

　　效果:

　　

 

第二种: 对容器有固定高度的单行文本设置line-height等于容器height达到垂直居中效果

　　CSS:

    .wrap{
        width: 200px;
        height: 200px;
        line-height: 200px;
        border: 1px solid red;
    }

 

　　HTML:

    <div class="wrap">
        需要居中的内容    
    </div>

 

　　效果:

　　注意: 这种方法只对单行文本有效

第三种: 使用新的display:table-cell,达到垂直居中效果

　　CSS:

    .wrap{
        width: 200px;
        height: 200px;
        display: table-cell;
        vertical-align:middle;
        border: 1px solid red;
    }

 

　　HTML:

    <div class="wrap">
        需要居中的内容
        需要居中的内容
        需要居中的内容
        需要居中的内容    
    </div>

 

　　效果:

　　

 

　　注意: IE6和IE7不支持这个CSS属性值