html - 将 div 移动到居中的 div 下

Question

正如您在图像中看到的那样，类为“inner”的元素位于“outer”div 的中心，为此我使用了this。堆栈溢出帖子。我曾尝试让 Hello World 段落出现在居中的 div 下方，但没有欺骗 margin 属性，但没有成功。

.outer {
  position: relative;
  height: 80%;
  width: 100%;
}
.inner {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  vertical-align: middle;
}

<div class="outer">
  <div class="inner"></div>
  <p>Hello World</p>
</div>

Answer 1

如果您将多个元素居中，请将它们放在一个容器中并居中那个容器，如下所示:

html, body {
  height: 100%;
}
.outer {
  background: blue;
  position: relative;
  height: 100%;
  width: 100%;
}
.center {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  /* offset margin by 1/2 height of addtl elements */
  margin-top: 23px;
}
.inner {
  background: lightblue;
  width: 300px;
  height: 100px;
}
p {
  background: lightgray;
  text-align: center;
  margin: 16px 0 0;
  height: 30px;
  /* 30 + 16 = 46 ==> 46 / 2 = 23 (offset) */
}

<div class="outer">
  <div class="center">
    <div class="inner"></div>
    <p>Hello World</p>
  </div>
</div>