I currently have the following code:

```
<div id="container">
     <div class="card">1</div>
     <div class="card">2</div>
     <div class="card">3</div>
     <div class="card">4</div>
</div>

<style>
    #container{
       width:100%;
       height:100%;
       overflow-y:auto;
       position:absolute;
       left:0; top:10px;
       padding:10px;
    }

    .card{
       width:100px; height:100px; margin:10px;
       float:left;
    }
</style>

```

I am trying to vertically and horizontally align the div boxes so that the more boxes that appear, it still stays both vertically and horizontally centred in the container. For example:

[![enter image description here](https://i.stack.imgur.com/VR1Ew.png)](https://i.stack.imgur.com/VR1Ew.png)
Example of what it would look like with 4 cards which fit in the container..

[![enter image description here](https://i.stack.imgur.com/INSa2.png)](https://i.stack.imgur.com/INSa2.png)
Example of what it would look like with 12 cards which overflow in the container..

[![enter image description here](https://i.stack.imgur.com/NoSWn.png)](https://i.stack.imgur.com/NoSWn.png)
Example of what it would look like with cards that dont fit in the container..