在中心div下移动div

Question

正如您在图像中看到的那样，具有“内部”类的元素在“外部”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

如果您将多个元素置于中心位置，请将它们放在一个容器中，然后将 容器放在中心位置，如下所示：

＆＃13;

＆＃13;

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) */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我会建议这样的事情：https://jsfiddle.net/jw6vcxh7/

.outer {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border: 1px solid red;
  width: 500px;
  height: 800px;
}

.inner {
  height: 100px;
  width: 100px;
  margin: 0 auto;
  border: 1px solid blue;
}

Answer 3

你是打算让它垂直和水平居中？

如果是这样，你可以添加

.outer p {
  position: relative;
  top: 50%;
  left: 50%;
  display:block;
}

或者如果你需要它只是在地理上居中，那么以下应该可以做到这一点......

.outer {
  position: relative;
  height: 80%;
  width: 100%;
  border: 1px solid red;
}
.inner {
  position: relative;
  height: 100px;
  width: 100px;
  display: block;
  margin: 0px auto;
  vertical-align: middle;
  border: 1px solid blue;
}
.outer p {
  display: block;
  margin: 0px auto;
  width: 80%;
  text-align: center;
  background: #ccc;
  }
}

可以在http://vanseodesign.com/css/vertical-centering/

找到对中心div的一个很好的参考