要让元素在水平和垂直方向上居中，可以使用Flexbox中的一些属性。以下是一些代码示例和讲解：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

在这个示例中，我们创建了一个包含五个<div>元素的容器，这些元素将使用Flexbox进行布局。我们将容器的display属性设置为flex，这将启用Flexbox布局。然后，我们将容器的justify-content属性设置为center，这将使容器中的元素在水平方向上居中。我们还将容器的align-items属性设置为center，这将使容器中的元素在垂直方向上居中。

这个简单的示例展示了如何使用Flexbox来创建一个水平和垂直居中的列表。通过使用更多的Flexbox属性，我们可以创建更复杂的布局，例如在多个方向上居中、在多列布局中居中等等。