Html 无法在flex div容器中两行显示h3标记

我使用下面的例子，我需要在页面中为每个项目使用两个标题。

div inside

li

被定义为flex，如果我添加了多个元素，它会显示为两列，但我想分为两行，水平和垂直居中对齐

如果我将flex更改为block或其他属性，则标题将移动到顶部，而我希望它们位于中间

不知道如何用最小的css修复它

使用

弹性方向

和

调整内容

属性，如：

.cbp-rfgrid li a div {
  flex-direction: column; /* Flex Direction Column */
  justify-content: center; /* Vertically Aligns Content (on flex-direction: column) */
}

查看下面的代码段（使用全屏）：

.cbp rfgrid{
利润率：35px0；
填充：0；
列表样式：无；
位置：相对位置；
宽度：100%；
}
.美国海关与边境保护局{
位置：相对位置；
浮动：左；
溢出：隐藏；
宽度：16.66667%；/*回退*/
宽度：-webkit计算（100%/6）；
宽度：计算值（100%/4）；
保证金：1px；
}
.美国海关与边境保护局，
.美国海关与边境保护局{
显示：块；
宽度：100%；
光标：指针；
}
.美国海关与边境保护局{
最大宽度：100%；
}
/*Flexbox用于使标题居中*/
.美国海关与边境保护局{
位置：绝对位置；
左：20px；
顶部：20px；
右：20px；
底部：20px；
背景：rgba（71163218,0.2）；
显示：-webkit flex；
显示：-moz flex；
显示：-ms flex；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
-webkit对齐项目：居中；
-moz对齐项目：居中；
-ms对齐项目：居中；
对齐项目：居中；
文本对齐：居中；
不透明度：0；
}
.cbp RFLI a：悬停分区{
不透明度：1；
}
.美国海关与边境保护局区域情报室a分区h3{
宽度：100%；
颜色：#fff；
文本转换：大写；
字号：1.4em；
字母间距：2px；
填充：0 10px；
}
/*媒体查询示例：更改每行的项目数*/
@媒体屏幕和屏幕（最大宽度：1190px）{
.美国海关与边境保护局{
宽度：20%；/*回退*/
宽度：-webkit计算（100%/5）；
宽度：计算值（100%/5）；
}
}
@媒体屏幕和屏幕（最大宽度：945px）{
.美国海关与边境保护局{
宽度：25%；/*回退*/
宽度：-webkit计算（100%/4）；
宽度：计算值（100%/4）；
}
}
@媒体屏幕和屏幕（最大宽度：660像素）{
.美国海关与边境保护局{
宽度：33.3333%；/*回退*/
宽度：-webkit计算（100%/3）；
宽度：计算值（100%/3）；
}
}
@媒体屏幕和屏幕（最大宽度：660像素）{
.美国海关与边境保护局{
宽度：33.3333%；/*回退*/
宽度：-webkit计算（100%/3）；
宽度：计算值（100%/3）；
}
}
@媒体屏幕和屏幕（最大宽度：400px）{
.美国海关与边境保护局{
宽度：50%；/*回退*/
宽度：-webkit计算（100%/2）；
宽度：计算（100%/2）；
}
}
@媒体屏幕和屏幕（最大宽度：300px）{
.美国海关与边境保护局{
宽度：100%；
}
}

哦，那很简单。Great@Learning更新了我的答案，请再次查看。我想知道为什么它不起作用。谢谢更新你的答案

.cbp-rfgrid li a div {
  flex-direction: column; /* Flex Direction Column */
  justify-content: center; /* Vertically Aligns Content (on flex-direction: column) */
}