How to center flex container with flex-wrap?

Question

In my situation need to resolve a problem if I have layout like that:

.l-item-container-wrapper
    display: flex
    justify-content: center
    width: 100%  

.l-item-container
    display: flex
    flex-direction: row
    flex-wrap: wrap
    justify-content: center
    margin: auto
    width: 100% 
 
.category-item-wrapper
    box-sizing: border-box
    display: flex
    justify-content: center
    max-width: 255px
    padding: 5px  
    width: 100%

.category-item-wrapper
    box-sizing: border-box
    display: flex
    justify-content: center
    max-width: 255px
    padding: 5px  
    width: 100%    

.category-item
    display: flex   
    flex-direction: column
    align-items: center
    cursor: pointer
    padding: 5px 

.category-img-wrapper
    display: flex
    justify-content: center
    align-items: center
    position: relative    
    width: 100%
    &:before
        content: ""
        display: block
        padding-top: 73.4%
        
.category-img
    max-width: 100%
    max-height: 100%
    position: absolute
    z-index: 2

<div class="l-item-container-wrapper">
<div class="l-item-container">


<div class="category-item-wrapper">
    <div class="category-item" onclick="openCat('c{CAT_ID}')">
        <div class="category-img-wrapper">
            <img src="{IMG}" alt="" class="category-img">                        
        </div>
        <p>{CAT_NAME}</p>
    </div>        
</div> 


<div class="category-item-wrapper">
    <div class="category-item" onclick="openCat('c{CAT_ID}')">
        <div class="category-img-wrapper">
            <img src="{IMG}" alt="" class="category-img">                        
        </div>
        <p>{CAT_NAME}</p>
    </div>        
</div> 
 
<!-- Same category-item-wrappers -->

</div> 
</div>

I want stand position container centered, relative to the

.wrapper 
 {width:100%}

I particularly found this codepen.io look like what I want but (that bad solution, cause I don't know how many items I have)... I need what 13 element stand under 10 (if I delete justify-content: center, all container not centered)

Like that, but flex container must be in the center of the wrapper!

And it`s must be responsive!

(Sorry for bad English)