如何使用柔性包装将柔性容器对中？

Question

在我的情况下，如果我有这样的布局，需要解决问题：

＆＃13;

＆＃13;

.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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我希望站位置容器相对于

居中

.wrapper 
 {width:100%}

我特别found this codepen.io看起来像我想要的但是（那个糟糕的解决方案，因为我不知道我有多少物品）......我需要13个元素在10以下（如果我删除） justify-content：center ，所有容器都不居中）

就像那样，但是flex容器必须位于包装器的中心！

它必须响应！

（抱歉英语不好）