html - css center floating divs horizontally -

i want page center floating divs regardless of page width , number of divs per row.

if page fits 3 divs per row, , have 4 divs, want fourth div under first div. if user makes window wider, fourth div moves first row:

[ [div1]  [div2]  [div3]  [div4] ]   [ [div1]  [div2]  [div3] ] [ [div4]                 ]   [  [div1]  [div2]  ] [  [div3]  [div4]  ] 

i tried making container div text-align:center , content divs inline-block makes divs in last row centered this:

[ [div1]  [div2]  [div3] ] [         [div4]         ] 

here code: https://jsfiddle.net/g8l1ovj0/

flexbox can that

.container {    width: 80%;    border: 1px solid grey;    margin: 25px auto;    display: flex;    flex-wrap: wrap;    justify-content: space-between;  }  .box {    height: 150px;    width: 150px;    background: #000;    flex: 0 0 auto;    margin: 1px;  }

<div class="container">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>

codepen demo