Vertically & horinzontally align multiple div children in container - html

Question

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:
Example of what it would look like with 4 cards which fit in the container..
Example of what it would look like with 12 cards which overflow in the container..
Example of what it would look like with cards that dont fit in the container..

Answer 1

DEMO
HTML
<div class="container">
<div class="container-wrapper">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
CSS
.container {
position: relative;
display:table;
background: red;
width:100%;
height: 100%; /* auto is default, you can have ur height here */
}
.container-wrapper {
display: table-cell;
margin:auto;
text-align:center;
font-size:0;
width:90%;
height:90%;
vertical-align:middle;
}
.card {
display: inline-block;
height:100px;
width:100px;
border: 1px solid #ddd;
background: #eee;
margin:10px;
}
DEMO 2 with some height of the container

Answer 2

Try Flexbox DEMO
#container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0 auto;
flex-wrap: wrap;
box-sizing: border-box;
}
.inner {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
max-width: 750px;
margin: 0 auto;
flex-wrap: wrap;
}
.card{
width:100px;
height:100px;
margin:10px;
border: 1px solid black;
}
<div id="container">
<div class="inner">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">3</div>
<div class="card">4</div>
</div>
</div>

Answer 3

You may not be able to use external libraries for your project, but there is still much to learn from them in my opinion.
Your situation is a basic example of how a grid system can be useful. In deed, this problem has been solved and equated many times before by such systems.
Normally I would suggest Twitter Bootstrap 3, but since this framework is somewhat complex, I think it would be easier to read something more lightweight, like 960 grid system. Here are two links that can give you a brief introduction into the library:
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/
http://webdesign.tutsplus.com/articles/using-the-960-grid-system-as-a-design-framework--webdesign-2036
Once you understand this, IMO, you have no other choice than to dive into the framework and see how it is done. It will be messy.
I also believe you will have to use JavaScript. Can you use jQuery?
Either way, when adding a new card, detect it using JavaSctipt, and then change the DOM based on that.
Hope I helped.