Horizontally Center Items - display: table

Elements are dynamically centered without the container being centered with a fixed with. Support: IE8+ and modern browsers.

HTML

<ul>
    <li><a href="#">Home</a>

    </li>
    <li><a href="#">Careers</a>

    </li>
    <li><a href="#">About</a>

    </li>
    <li><a href="#">Contact</a>

    </li>
    <li><a href="#">Contact</a>

    </li>
    <li><a href="#">Contact</a>

    </li>
    <li><a href="#">Contact</a>

    </li>
    <li><a href="#">Contact</a>

    </li>
    <li><a href="#">Contact</a>

    </li>
    <li><a href="#">Contact</a>

    </li>
    <li><a href="#">Contact</a>

    </li>
    <li><a href="#">Contact</a>

    </li>
    <li><a href="#">Contact</a>

    </li>
    <li><a href="#">Contact</a>

    </li>
    <li><a href="#">Contact</a>

    </li>
    <li><a href="#">Contact</a>

    </li>
    <li><a href="#">Contact</a>

    </li>
</ul>

CSS

ul {
    display: flex;
    margin: 10px auto;
    padding: 0 10px;
    flex-wrap: wrap;
    justify-content: space-between;
}
li {
    list-style: none;
    padding: 5px 0;
    margin: 5px 0;
}
li a {
    background: #82B5DA;
    border: 1px solid #599CCE;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    padding: 5px;
    color: #333;
    text-decoration: none;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
li a:hover {
    background: #599CCE;
}

JavaScript

/* 
    Browser support: IE8+ and modern browsers.
*/