Question

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

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

我尝试过display：inline-block with vertical-align：middle，但它没有效果。

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

你可以：

一个。将高度更改为特定数字，然后添加margin-top: -高度;

OR

B中。将其添加到#inner

的代码中

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

B的示例：CodePen.io

OR

℃。如果你想使用一个flexbox（这里的说明：Flexbox complete guide）并添加：

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

Answer 2

这可能有助于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 3

您可以使用flexbox以及align-items: center;和justify-content: center;

来实现

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

以嵌套div为中心

3 个答案: