与下面的 div 垂直对齐的 h1

Question

我试图在我有一个垂直和水平居中的 div （在包含动态 div 内）的地方产生影响。我可以使用以下 css 实现这一点：

#centered-div {
vertical-align: middle;
margin: auto;
}

但是，我还想要另一个水平居中的 div（也在父 div 中），并且在#centered-div 下方始终是固定距离（如 30 像素）。

在图片中，大 div 相对于父容器水平和垂直居中，而较小的 div 在大 div 的正下方。截至目前，我还没有找到一个很好的方法来做到这一点。有简单的方法吗？

Answer 1

像这样？如果没有更多代码或图像，很难描绘出你想要的东西。 注意：我正在使用flex，虽然它的支持正在增长，但它仍然相对较新。

#dynamic-div {
  width: 100%;
  height: 500px;
  background: green;
  justify-content: center;
  display: flex;
}

#centered-div {
  background: red;
  align-self: center;
}

#inside-above-div {
  background: yellow;
}

#inside-below-div {
  margin-top: 30px;
  background: orange;
}

<div id="dynamic-div">

  <!-- This div hold the content -->
  <div id="centered-div">

    <div id="inside-above-div">
      Heading
    </div>

    <div id="inside-below-div">
      paragraph
    </div>

  </div>

</div>