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,
.flex-stack {
  display: flex;
  flex: 1;
  align-items: center;
}

.flex-stack {
  flex-direction: column;
}

.module-1,
.module-2 {
  margin: 1em;
}

<h3>Flex Inline</h3>

<div class="flex">
  <div class="module-1">
    Module #1
  </div>
  <div class="module-2">
    Module #2
  </div>
</div>

<h3>Flex Stacked</h3>

<div class="flex-stack">
  <div class="module-1">
    Module #1
  </div>
  <div class="module-2">
    Module #2
  </div>
</div>

希望它有用。干杯！

使用flex堆叠div

1 个答案: