不定高度内容垂直居中

 

效果：

 

html：
<div id="demo">
    <div class="box1">
        <div class="box2">一旦你娶了中国太太，就等于娶了她全家，不到半年，她爹、她妈、她二姐、她二姐的孩子就排着队全来了……我好端端的一个美国家庭，一眨眼工夫，就被中国人给占领了。</div>
    </div>
</div>

css：
#demo {
    display: table-cell;  /*表格单元格*/
    vertical-align: middle;  /*vertical-align属性只会对拥有valign特性的(X)HTML标签起作用*/
    height:200px;
    width: 300px;
    text-align: center;
    background-color: #abcdef;
     *position:relative;
}
.box1 {
    *position:absolute;
    *top:50%;
}
.box2 {
    *position:relative;
    *top:-50%;
    *left:-50%;
}

原理：

       标 准浏览器及ie8以上(包括ie8)使用display: table-cell; vertical-align: middle; 即可实现，无需嵌 套.box1和.box2，这两个class的嵌套是为了兼容ie6和7不支持display: table-cell 而加的，标准浏览器及ie8以上 (包括ie8)top值如果使用百分比参数的话，其父元素必须设定高度，否则无效，ie6和7无需设定即可生效。