Html 如何使两个div以两行为中心

我有两个块（DIV），两个块都位于屏幕的中心，我希望按照附件的规定，一行一行地保持这些块的垂直，请注意，父DIV位于

display:flex

.wrapper{
宽度：100%；
浮动：左；
背景：#ccc；
对齐项目：居中；
显示器：flex；
}
.1分部{
利润率：10px自动；
宽度：300px；
边框：1px实心#000；
背景：#fff；
}
.第2分部{
利润率：10px自动；
宽度：300px；
边框：1px实心#000；
背景：#fff；
}

第一区
第2区

当您使用

柔性箱时

使用

柔性方向：列

将柔性轴更改为垂直

请参阅下面的代码片段：

.wrapper{
宽度：100%；
浮动：左；
背景：#ccc；
对齐项目：居中；
显示器：flex；
弯曲方向：立柱；
}
.1分部{
利润率：10px自动；
宽度：300px；
边框：1px实心#000；
背景：#fff；
}
.第2分部{
利润率：10px自动；
宽度：300px；
边框：1px实心#000；
背景：#fff；
}

第一区
第2区

您真的需要

显示屏：flex

？在这种情况下不需要它。只需使用

text align:center

。我已使用flex使子div垂直对齐居中感谢快速响应，添加了“flex direction:column”，但丢失了垂直对齐居中。垂直对齐现在使用

justify content:space around

或

space between

，您认为合适。。。