以嵌套div为中心

Question

我搜索google和堆栈溢出已经有一段时间了，但似乎没有任何效果。

我试图在div中对div进行居中，这些div都包含在一个页面包装器中。我可以让它水平地中心，但不是垂直的。有什么建议吗？

我试过显示:内嵌块与垂直对齐:中间，但它没有效果。

CSS

​

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background-color: black;
}

#page-wrapper {
  padding: 0 12.5% 0 12.5%;
  margin: 0;
}

#outer {
  width: 100%;
  height: 1000px;
  background-color: darkgray;
  position: relative;
}

#inner {
  position: relative;
  width: 50%;
  height: 20%;
  margin: 0 auto;
  background: grey;
}

<body>
  <div id="page-wrapper">
    <div id="outer">
      <div id="inner"></div>
    </div>
  </div>
</body>

​

Answer 1

这可能对https://css-tricks.com/centering-css-complete-guide/有帮助

变化

#inner {
  position:relative;
  width: 50%;
  height: 20%;
  margin: 0 auto;
  background:grey;
}

至

#inner {
  width: 50%;
  height: 20%;
  margin: 0 auto;
  background:grey;

  /* magic here */
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 2

你可以：

将高度更改为特定的数字，并添加margin-top: -身高;

或

将其添加到#inner的代码中

position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

B：CodePen.io示例

或

C.如果您想让它变得更漂亮，请使用一个柔性盒(这里的说明：柔性箱完整指南)并添加：

display: flex; justify-content: center; align-items: center;

Answer 3

您可以通过使用flexbox以及align-items: center;和justify-content: center;来实现这一点。

看看这个：https://codepen.io/anon/pen/GOQwre