css如何让 ul li居中显示

CSS（层叠样式表）是网页设计中必不可少的一项技能，可以用来修改网页上的各种元素的样式。许多开发者在设计页面时经常会遇到让 ul li 居中的问题，这篇文章将教你如何使用 CSS 让它们居中。

首先，我们来看一下怎么创建一个 ul 和 li 列表：

<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>

如果你现在把这段代码放在 HTML 文件中，你会发现这个列表是左对齐的。那么如何让它居中呢？

首先，我们要设置 ul 的宽度，这样才能让它水平居中。在 CSS 中，我们使用“margin: 0 auto;”来让一个元素水平居中，因此可以这样写：

ul {
  width: 300px; /* 设置宽度 */
  margin: 0 auto; /* 让它水平居中 */
}

现在，如果你预览你的网页，你会发现 ul 中的 li 已经水平居中了。但是它们还没有垂直居中，这时候我们需要使用“line-height”属性：

ul {
  width: 300px;
  margin: 0 auto;
  line-height: 30px; /* 指定行高 */
}

我们可以根据实际情况调整行高的大小。

如果你还想让列表项之间的距离更紧凑一些，可以使用“padding”属性：

li {
  padding: 10px;
}

这样做可以让 li 之间的距离更小，同时也让整个列表看起来更紧凑。

这就是 CSS 让 ul li 居中的简单方法。记得在添加新的样式时，要根据实际情况进行微调，让整个页面看起来更加美观。