div未知高度水平、垂直居中

此方法主要用于移动端html5开发，因为box-flex是css3新添加的盒子模型属性，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分。但是它有一定的局限性，在firefox、chrome这浏览器下需要使用它们的私有属性来定义：firefox(-moz)、chrome（-webkit）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>div未知高度水平、垂直居中</title>
 </head>
<style>
html, body {
   height: 100%;
} 

#big_div{
    width:100%;
    height:100%;
    background-color:#00FF00;
}

#small_div{
    width:30%;
    height:30%;
    background-color:#0000FF;
}

#smallest_div{
    background-color:#FF0000;
}
/*box盒子布局*/
.ub
{

    display: -webkit-box;
    display: -moz-box;
    position:relative;
}
/*垂直居中*/
.ub-ac
{
    -webkit-box-align:center;
    -moz-box-align:center;
    box-align:center;
}
/*水平居中*/
.ub-pc
{
    -webkit-box-pack:center;
    -moz-box-pack:center;
    box-pack:center;
}

</style>
 <body>
  <div id="big_div" class="ub ub-ac ub-pc">
    <div id="small_div" class="ub ub-ac ub-pc">
        <div id="smallest_div">2222</div>
    </div>
  </div>
 </body>
</html>

　效果如下：

posted @ 2014-01-04 20:36  无心花  阅读(285)  评论(0)  编辑  收藏  举报