垂直对齐h1，下方有div

Question

我试图得到一个影响，我有一个垂直和水平居中的div（在包含动态div内）。我可以通过以下css实现这一点：

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

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

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

Answer 1

喜欢这个？没有更多代码或图像，很难想象你想要什么。 注意：我正在使用flex，虽然它的支持正在增长，但它仍然相对较新。

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;