Wie zentriere ich floated Elemente?

Question

Ich habe einen Wrapper mit einer Reihe von Divs in Form von Boxen. Hier sind einige Probleme, mit denen ich konfrontiert bin.
Wenn ich die Größe des Fensters ändere, scheinen die Elemente linksbündig zu sein. Wie ordne ich sie zentral an?

Ein weiteres Problem ist, dass die Größe der divs leicht variieren, was sie falsch ausrichtet.

Here is the Fiddle

.left_wrapper  
{    
    max-width: 70%; 
    margin:0 auto; 
    float:left; 
} 


.boxa 
    { 
    background-color: #45e645; 
    display:inline; 
    position:relative; 
    left:4%; 
    float:left; 
    margin: 1% 1%; 
    padding:1%; 
    font-size: 85px; 
    text-align:center; 
    border:1px solid green; 

} 




<div class="left_wrapper" id="roll_nos"> 
    <div id="box" class="boxa">01</div> 
    <div id="box" class="boxa">02</div> 
    <div id="box" class="boxa">03</div> 
    <div id="box" class="boxa">04</div> 
    ............. 
    ............. 
    ............. 
    ............. 

</div> 

Wie bereits angedeutet, ist die Frage nicht ein Duplikat der oben genannten Frage, obwohl das Problem auf die man dort präsentiert (nur) ähnlich ist.

Die akzeptierte und meist aktualisierte Antwort ist in meinem Fall nicht anwendbar, weil ich möchte, dass die Elemente automatisch zur nächsten Zeile wechseln, wenn das Fenster in der Größe geändert wird. Dank "@Niet the Dark Absol" arbeitet die Flex-Wrap-Lösung, um die Elemente auszurichten, aber eine leichte Fehlausrichtung liegt immer noch dort, die rote Linie in der Nähe von # 13 hebt es hervor.

Answer 1

Für Ihre variieren div Größe "rote Linie aligment" Ich empfehle hinzufügen:

.boxa { 
    min-width: 85px; 
} 

Answer 2

Mit dieser ohne float:left code fand ich ok von meinem PC Und Browser!

.left_wrapper  
    {    
    max-width: 70%; 
    margin:0 auto; 
}