使用 Flex 布局实现元素居中并自动换行

要使用 flex 元素居中并自动换行，可以按照以下步骤进行：

创建一个包含要居中的元素的父元素，并将其设置为 flex 容器。
将 flex 容器的 justify-content 属性设置为 center，这将使其子元素在水平方向上居中对齐。
将 flex 容器的 align-items 属性设置为 center，这将使其子元素在垂直方向上居中对齐。
如果需要子元素自动换行，则可以将 flex 容器的 flex-wrap 属性设置为 wrap，并将子元素的 flex-basis 属性设置为一个固定的宽度或百分比。

下面是一个示例代码片段，可以将其用作参考：

<div class='container'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, tellus vel ultrices dignissim, velit velit consequat nibh, id posuere sapien urna in eros.</p>
</div>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 400px;
    height: 300px;
    border: 1px solid #ccc;
    padding: 20px;
  }
  
p {
    flex-basis: 100%;
    text-align: center;
  }
</style>

在上面的示例中，我们创建了一个带有一个段落元素的容器，然后将容器设置为 flex 容器，并将其子元素的 flex-basis 属性设置为 100%。这将使段落元素自动换行，并在容器中居中对齐。同时，我们还将容器的宽度和高度设置为固定值，并添加了一些边框和填充，以便更好地显示容器。