此方法主要用于移动端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>
效果如下：
