Center ul in cell in Bootstrap 3

Question

I have a web page that uses Bootstrap 3. In this web page, I'm trying to center a ul within a col-xs-12. Currently, in this Bootply, I have the following:

<div class="container">
  <div class="row">
    <div class="col-xs-12 center-block" style="background-color:grey;">
      <ul class="list-inline">
        <li><div class="item"></div></li>
        <li><div class="item"></div></li>
        <li><div class="item"></div></li>
        <li><div class="item"></div></li>
        <li><div class="item"></div></li>
      </ul>
    </div>
  </div>
</div>

As shown, the ul is left-aligned within the div. How do I center the ul in the div. If that's not possible, how do I horizontally center a list of horizontally laid out items?

Answer 1

<ul class="list-inline">
  <li><div class="item"></div></li>
  <li><div class="item"></div></li>
  <li><div class="item"></div></li>
  <li><div class="item"></div></li>
  <li><div class="item"></div></li>
</ul>

.list-inline {
  display: flex;
  justify-content: center;
}