CSS中的li元素居中是Web开发中常见的需求。在实现这个效果之前，我们首先需要了解布局模型和HTML的结构。

在HTML文件中，我们通常使用

和
• 标签来创建无序列表。而对于li元素的排列方式，我们可以使用CSS的display属性将其转化为行内元素或块级元素。比如：

  li {display: inline-block;margin: 0 10px;}

  在以上代码中，我们将li元素的display属性设为inline-block，这意味着我们可以给它设置宽高并让其在一行内排列。同时，我们还设置了元素间的margin值来控制它们之间的距离。

  接着，我们考虑如何实现li元素的居中。对于默认情况下的无序列表，它们的排列是左对齐的，我们可以通过设置ul元素的text-align属性来实现居中，比如：

  ul {text-align: center;}

  使用以上代码，我们可以将无序列表的li元素居中对齐。但同时，我们还需要重新设置li元素的display属性为块级元素，以便让它们在一行内排列。因此，我们需要给li元素添加以下样式：

  li {display: inline-block;margin: 0 10px;text-align: left;}

  使用以上样式，我们就可以将li元素在居中的情况下排列在一行内了。