多行浮动元素居中

css

Html:

<ul class="icon-list clearfix">
    <li>
        <a href="#">
            <img src="http://placehold.it/70*70" alt="图标">
            <p>XXXX</p>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="http://placehold.it/70*70" alt="图标">
            <p>XXXX</p>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="http://placehold.it/70*70" alt="图标">
            <p>XXXX</p>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="http://placehold.it/70*70" alt="图标">
            <p>XXXX</p>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="http://placehold.it/70*70" alt="图标">
            <p>XXXX</p>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="http://placehold.it/70*70" alt="图标">
            <p>XXXX</p>
        </a>
    </li>
</ul>

Style:

.icon-list{
    padding: 14px 0;
    li{
        float: left;
        margin: 14px 25px;
        text-align: center;
    }
}

问题：
如何让.icon-list li元素居中对齐即两边填上空白（li的个数不定）？

问题补充：
solar的方法在多行的情况下会表现成这样：

我希望它都能居中，用js的方法也可以。