verticalmente e horinzontally allineare più bambini div nel container

Question

ho attualmente il seguente codice:

<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> 

sto cercando di verticalmente e orizzontalmente allineare le caselle div in modo che i più caselle che appaiono, rimane ancora sia in verticale e centrato orizzontalmente nel contenitore. Per esempio:

Esempio di quello che sarebbe simile con 4 carte che si inseriscono nel contenitore ..

Esempio di ciò che sarebbe simile con 12 carte che di overflow nel contenitore ..

Esempio di ciò che sarebbe simile con le schede che dont in forma nel contenitore ..

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

Prova FlexboxDEMO

#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

Potrebbe non essere in grado di utilizzare librerie esterne per il progetto, ma c'è ancora molto da imparare da loro a mio parere.

La situazione è un esempio di base di come un sistema di griglia può essere utile. In realtà, questo problema è stato risolto ed equiparato molte volte prima da tali sistemi.

Normalmente suggerirei Twitter Bootstrap 3, ma poiché questo framework è piuttosto complesso, penso che sarebbe più semplice leggere qualcosa di più leggero, come 960 grid system. Qui ci sono due link che si può dare una breve introduzione nella libreria:

• 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

Una volta capito questo, IMO, non avete altra scelta che tuffarsi nel quadro e vedi come è fatto. Sarà disordinato.

Credo anche che sarà necessario utilizzare JavaScript. Puoi usare jQuery? In entrambi i casi, quando si aggiunge una nuova scheda, rilevarla utilizzando JavaSctipt e quindi modificare il DOM in base a ciò.

Spero di aver aiutato.