Centering flowing div

by Marco Ballarini

HTML

<div class="container">
    <div class="box"><span>uno</span></div>
    <div class="box"><span>due</span></div>
    <div class="box"><span>tre</span></div>
    <div class="box"><span>quattro</span></div>
    <div class="box"><span>cinque</span></div>
    <div class="box"><span>sei</span></div>
    <div class="box"><span>sette</span></div>
    <div class="box"><span>otto</span></div>
    <div class="box"><span>nove</span></div>

</div>

<!-- Provate ad eliminare i div, i rimanenti rimarranno centrati. -->

CSS

html { height: 100%; }

body {     
    height: 100%;
    background-color: #e0e0e0;    
    }

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    max-width: 550px;
    height: 100%;
    margin: auto;
}

.box {
    height: 100px;
    width: 150px;
    margin: 10px;
    background-color: #ffffff;
    border: 1px solid #aaa;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}