Html Flexbox-对齐：居中/对齐：居中，高度未知

我试图将页面分成4个相等的正方形，内容居中。由于.flex项目div具有视口高度，我遇到的问题是内容居中，我正在寻找完整的flexbox解决方案，谢谢

我从资源中尝试了以下方法：

调整资源中心

将项目对齐到中心

.flex容器{
显示：-webkit flex；
-webkit flex流：行换行；
柔性流：行换行；
}
.color_1{
背景：番茄；
}
.颜色2{
背景：浅绿色；
}
.color_3{
背景：粉蓝；
}
.颜色4{
背景：钢蓝；
}
.弹性项目{
-webkit flex:10自动；
弹性：10自动；
宽度：50%；
高度：50vh；
}

内在的

内在的

内在的

内在的

将

.flex项目

设为flex容器，并使用和集中其内容：

.flex项{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

正文{
保证金：0；
}
.柔性容器{
显示器：flex；
柔性包装：包装；
}
.color_1{
背景：番茄；
}
.颜色2{
背景：浅绿色；
}
.color_3{
背景：粉蓝；
}
.颜色4{
背景：钢蓝；
}
.弹性项目{
弹性：10自动；
宽度：50%；
高度：50vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

内部的
内部的
内部的
内部的