Css 如何将响应型flexbox分区水平居中于外部分区内

我一直在尝试制作一个简单的响应灵活的flexbox布局，其中的列进行包装，以便它们始终垂直排列

这很好：

.outer{
页边距：自动；/*不居中.inner div的内容*/
}
.内部{
显示器：flex；
柔性包装：包装；
}
.内部.项目{
宽度：205px；
高度：180像素；
背景：红色；
利润率：10px；
}
.项目{
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

您的内部div是全宽的，因此maring auto无法在这里工作。您还可以在内部div上添加一个

justify content

.outer{
}
.内部{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.内部.项目{
宽度：205px；
高度：180像素；
背景：红色；
利润率：10px；
}
.项目{
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

仅仅因为没有任何内容可以居中显示，所以您的内容是全宽的。。您只能将flex项目居中，该怎么办？我尝试将

width

s添加到内部和外部div中，但不起作用。

justify content:center

在

internal

上，您也可以尝试使用

。项{position:absolute；transform:translate（-50%，-50%）；margin:auto；bottom:0；right:0；left:0；top:0；}

您想要的是不可能的，这里解释：谢谢，但那不是我想要的。在这种布局中，最下面一行的div没有对齐：-我希望所有div都以红色块为中心，所有div都垂直对齐：