在本文中，我们将介绍如何使用CSS将无序列表（unordered list）居中在一个div（

阅读更多：CSS 教程

要将无序列表居中，我们需要在父元素（即div元素）上应用一些CSS属性和值。首先，我们需要将父元素的display属性设置为flex。接下来，我们可以使用justify-content属性将列表水平居中，使用align-items属性将列表垂直居中。

以下是一个示例的HTML结构，用于将无序列表居中在一个div元素中：

现在，我们将为这个div元素应用CSS样式，以将无序列表居中。

我们将在CSS代码中为.center类选择器定义样式。下面是实现居中布局的CSS代码：

通过将display属性设置为flex，我们使得这个div元素成为一个flex容器。接下来，我们使用justify-content属性将无序列表居中。justify-content属性的值可以是flex-start（左对齐），flex-end（右对齐），center（居中对齐），space-between（之间平均分布），space-around（周围平均分布）等。

同时，通过align-items属性的值设置为center，我们可以将无序列表垂直居中。align-items属性的其他可能值包括flex-start（顶部对齐），flex-end（底部对齐），baseline（以基线对齐）和stretch（拉伸对齐）。

为了更好地理解如何居中无序列表，我们创建了一个更具体的示例。以下是HTML代码：

在这个示例中，我们将CSS样式分离到一个名为styles.css的外部样式表文件中，以保持HTML文件的整洁。以下是styles.css的内容：

在这个示例中，我们添加了一些额外的CSS样式以增强呈现效果。我们设置了.center类的高度和背景颜色。我们还使用了list-style-type属性将无序列表项的默认样式更改为无。此外，我们将列表项（li元素）的内边距、背景颜色和外边距进行了定义。

当你在浏览器中打开这个示例时，你将看到无序列表完美地居中在div元素中，并具有漂亮的样式。

在本文中，我们学习了如何使用CSS将无序列表居中在一个div元素中。通过将div元素的display属性设置为flex，并使用justify-content和align-items属性，我们可以实现水平和垂直居中。我们还通过一个具体的示例演示了如何应用这些属性和值以实现居中效果。希望这篇文章能帮助你掌握这个技术，并将其应用到自己的项目中。