Vertically and horizontally align multiple div children in a container

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 div fields so that more boxes appear, it still remains vertically and horizontally centered in the container. For instance:

An example of how it will look with 4 cards that fit into the container.

An example of how it will look with 12 cards that overflow in the container.

An example of how this will look with cards that do not fit into 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 container height

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 you still have a lot to learn from them.

Your situation is a basic example of how a grid can be useful. In fact, this problem was solved and equated many times before by such systems.

I usually suggest Twitter Bootstrap 3 , but since this structure is somewhat complicated, I think it would be easier to read something lighter, like the 960 grid system . Here are two links that can give you a brief introduction to 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 choice but to plunge into the framework and see how it is done. It will be dirty.

I also believe that you have to use JavaScript. Can you use jQuery? In any case, when adding a new map, discover it using JavaSctipt, and then change the DOM based on this.

Hope I helped.