码迷,mamicode.com
首页 > 其他好文 > 详细

不定高度内容垂直居中

时间:2014-12-03 11:51:51      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:http   io   color   os   使用   sp   on   div   bs   

 

效果:

bubuko.com,布布扣

 

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

 

不定高度内容垂直居中

标签:http   io   color   os   使用   sp   on   div   bs   

原文地址:http://www.cnblogs.com/k13web/p/4139404.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!