多行浮动元素居中

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的方法也可以。

---

不用浮动的话，可以试试 flexbox

ul {
display: flex;
justify-content: center;
}

---

Style:

scss.icon-list {
    font-size: 0;
    padding: 14px 0;
    text-align: center;

    li {
        font-size: 1rem;
        display: inline-block;
        margin: 14px 25px;
    }
}

以上方式存在兼容性问题，但是都是可以解决的，解决方案可以参考 pure 的 grid 的实现方式。目前这种写法基本上所有的主流浏览器，以及手机浏览器里表现都是一致的。

---

changes：

scss.icon-list {
    display: inline-block;
    max-width: 100%;
    margin: 0 auto;
    text-align: left;
}

.container { // ul的包含容器
    text-align: center;
}