布局：position:absolute; 

<body>
    <div class="childDiv" >
    <div  class="box box01">1</div>
    <div class="box box02">2</div>
    <div class="box box03">3</div>
    <div class="box box04">4</div>
    </div>
</body>
body{margin:0;padding:0;}

.childDiv{
    background-color:pink;
    height:100%;
    width:100%;
    position:absolute;
}
.box{background-color:purple;height:200px; width:200px; position:absolute;}
.box01{ background-color:deeppink; left:0; top:0;} 
.box02{ top:0; right:0; }
.box03{background-color:orange; bottom:0; left:0; }
.box04{ bottom:0; right:0;}

 

 

<body>
　　<div class="childDiv middleCenter">
   　　 <div  class="box box01">1</div>
    　　<div class="box box02">2</div>
    　　<div class="box box03">3</div>
    　　<div class="box box04">4</div>

    　　<div class="box_core" style="">center</div>
　　</div>
</body>
.childDiv{
    background-color:pink;
    height:100%;
    width:100%;
    position:absolute;
}


.middleCenter{
    display:-webkit-box;
     display:-moz-box;    
    display:-ms-flexbox; 
    display:box; 

    -webkit-box-pack:center; 
    -moz-box-pack:center;
    -ms-flex-pack:center; 
    box-pack:center; 

    -webkit-box-align:center; 
    -moz-box-align: center; 
    -ms-flex-align:center; 
    box-align:center;   
}


.box_core{
    width:200px;
     height:200px; 
    background-color:gray;

posted on 2019-08-08 17:33  九涅  阅读(170)  评论(0)  编辑  收藏  举报

导航