Html 用flex堆叠div

我有下面的代码，垂直居中我的内容

html

---

.flex被我网站上的其他div使用。然而，在这种情况下，它将H1和H4标题排列在一起，我希望它们在彼此的顶部堆叠。

< P>您可以考虑编写一个单独的CSS类，例如：

.flex-stack {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}

.flex，
.柔性堆栈{
显示器：flex；
弹性：1；
对齐项目：居中；
}
.柔性堆栈{
弯曲方向：立柱；
}
.模块1，
.模块2{
边缘：1米；
}

Flex内联
模块#1
模块#2
柔性堆叠
模块#1
模块#2

.titleHide {
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 100%;
  background-color: rgba(209,30,93,0.8);
}

.flex {
display: flex;
flex: 1;
align-items: center;
}

.flex-stack {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}