display: flex;改为居中

`display: flex;` 属性通常用于创建弹性布局，使得元素在容器内可以灵活地排列。要将 flex 容器内的项目水平和垂直居中，你可以使用以下方法：

1. **Flexbox 居中**: 如果你想要子元素在主轴（默认为行）上居中，可以给容器添加 `align-items: center;`。如果还要在交叉轴（默认为垂直）上居中，可以加上 `justify-content: center;`。

   .container {
     display: flex;
     align-items: center;
     justify-content: center;
   }

2. **使用 Flexbox 中心容器 (Centered Container)**: 如果容器本身是 `display: flex;` 并且你希望内部所有子元素都自动居中，可以将容器设置为 `flex: 1;` 来使其成为伸缩容器，然后在子元素上使用 `margin: auto` 或者 `auto` 的 `align-self` 属性。

   .container {
     display: flex;
     flex-direction: column; /* 如果你想垂直居中 */
     flex-wrap: wrap;
     justify-content: space-between; /* 可选，改变间距 */
     height: 100%; /* 添加高度，使 auto 效果可见 */
   }
   
   .container > * {
     margin: auto;
   }

3. **Grid Layout** (网格布局): 如果你更倾向于使用 CSS Grid，同样可以实现居中效果。只需要设置 `grid-template-columns` 和 `grid-template-rows`，以及 `justify-items` 和 `align-items` 属性。

   .container {
     display: grid;
     justify-items: center;
     align-items: center;
   }

记得根据你的实际需求选择合适的方法，并确保你的父容器具有足够的高度或宽度，以便子元素能够居中显示。如果你还有相关问题，请提问：