CSS 多行列表项在无序列表中的水平居中

在本文中，我们将介绍如何使用CSS实现多行列表项在无序列表中的水平居中。水平居中是网页设计中常见的布局需求之一，对于无序列表的多行列表项的水平居中，我们可以通过CSS来实现。

阅读更多：CSS 教程

使用inline-block实现居中布局

在CSS中，我们可以使用display: inline-block属性来实现水平居中的效果。要使用此方法，首先需要将列表项的容器元素设置为display: inline-block。然后，我们可以使用其他属性来使列表项居中。

以下是一个示例代码：

<style>
  .list-container {
    text-align: center;
  }

  .list-item {
    display: inline-block;
    text-align: left;
  }
</style>

<ul class="list-container">
  <li class="list-item">列表项1</li>
  <li class="list-item">列表项2</li>
  <li class="list-item">列表项3</li>
  <li class="list-item">列表项4</li>
  <li class="list-item">列表项5</li>
</ul>

在上面的例子中，我们首先将列表项容器的text-align属性设置为center，使列表项在水平方向上居中。然后，将列表项的display属性设置为inline-block，使其在一行内显示，并具有自适应宽度的特性。

使用flexbox实现居中布局

除了使用display: inline-block属性，我们还可以使用CSS的flexbox布局来实现水平居中。Flexbox是CSS3中的一种新的布局模型，它可以使我们更加灵活和简便地控制元素的布局和对齐。

以下是一个示例代码：

<style>
  .list-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .list-item {
    text-align: center;
  }
</style>

<ul class="list-container">
  <li class="list-item">列表项1</li>
  <li class="list-item">列表项2</li>
  <li class="list-item">列表项3</li>
  <li class="list-item">列表项4</li>
  <li class="list-item">列表项5</li>
</ul>

在上述代码中，我们将列表项的容器元素的display属性设置为flex，并使用justify-content: center将列表项在水平方向上居中对齐，使用align-items: center将列表项在垂直方向上居中对齐。此外，我们还可以使用flex-wrap: wrap来实现多行布局的效果。