DIV 칸 나누기와 정렬하기 방법 가르쳐 주세요.

<style>
    *{margin:0;padding:0;list-style:none}
    .box_wrap1{width:400px;margin:0 auto}
    .box_wrap1 div {width:50%;height:200px;float:left;background-color:#ddd;border:1px solid #000;box-sizing: border-box;}
    .box_wrap1:after{clear:both;content:'';display:block}
    .box_wrap2{width:400px;display:flex;flex-wrap:wrap;margin:0 auto}
    .box_wrap2 div{flex-basis:50%;height:200px;background-color:#ddd;border: 1px solid #000;box-sizing: border-box;}
</style>

<div class="box_wrap1">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="box_wrap2">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>