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