Css 引导程序3中的单元格中的ul居中

我有一个使用Bootstrap3的网页。在这个网页中，我试图将

ul

集中在

col-xs-12

中。目前，在这方面，我有以下几点：

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

---

如图所示，

ul

在

div

内左对齐。如何将

ul

集中在

div

中。如果不可能，如何将水平排列的项目列表水平居中？

尝试将属性

display:flex

和

justify content:center

添加到div

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


aaa
vvv
eee
eee
eee

.align ul{位置：相对；左：50%；浮动：左；右边距：0；左边距：0；}

对于水平居中，可以使用以下代码：

<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">aaa</div></li>
        <li><div class="item">vvv</div></li>
        <li><div class="item">eee</div></li>
        <li><div class="item">eee</div></li>
        <li><div class="item">eee</div></li>
     </ul>
  </div>

aaa
vvv
eee
eee
eee

.center block ul{位置：相对；左：50%；浮动：左；右边距：0；左边距：0；}
.center block li{位置：相对；右侧：50%；浮动：左侧；边距：0；列表样式：无}

只需使用引导

文本中心

，它可以使内联元素居中。不需要额外的CSS

<div class="container">
  <div class="row">
    <div class="col-xs-12" style="background-color:grey;">
      <ul class="list-inline text-center">
        <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>

.内联列表{
显示器：flex；
证明内容：中心；
}

<div class="container">
  <div class="row">
    <div class="col-xs-12" style="background-color:grey;">
      <ul class="list-inline text-center">
        <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>

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