首页 > 代码库 > 不定高度内容垂直居中

不定高度内容垂直居中

 

效果:

 

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无需设定即可生效。

 

不定高度内容垂直居中