用 flex 堆叠 div

Question

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

html

<div class="titleHide flex">
   <h4>...</h4>
   <h1>...</h1>
</div>

css

.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 被我网站上的其他 div 使用。但是，在这种情况下，它将 h1 和 h4 标题并排对齐，我希望它们堆叠在一起。

Answer 1

您可以考虑为此编写一个单独的 CSS 类，例如：

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

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

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

.flex-stack {
  flex-direction: column;
}

.module-1,
.module-2 {
  margin: 1em;
}

希望它有帮助。干杯!