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

時間 2019-11-10

標籤 div 未知高度水平垂直居中欄目 CSS 简体版

原文原文鏈接

此方法主要用於移動端html5開發，由於box-flex是css3新添加的盒子模型屬性，它的出現打破了咱們常用的浮動佈局，實現垂直等高、水平均分、按比例劃分。可是它有必定的侷限性，在firefox、chrome這瀏覽器下須要使用它們的私有屬性來定義：firefox(-moz)、chrome（-webkit）。css

<!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>