Question

我have一个包含header，footer和content的Flexbox容器。使用flexbox对于我来说伸展content是没有问题的，因此需要所有可用的垂直空间（绿色）。

但我无法将content内的所有内容垂直居中。我第一次考虑使用相同的flexbox方法，但它失败了。在我的例子中，基本上，红色区域必须占据绿色区域占据的所有空间，文本应该在绿色区域内垂直和水平居中。

我想念什么？

Answer 1

您还可以在if(oldRecord != newRecord) show(newRecord) if(!oldRecords.contains(newRecord)) show(newRecord)上添加display: flex，然后从项目中删除main。

＆＃13;

flex-grow: 1

＆＃13;

html,
body {
  height: 100%;
  background-color: #ddd;
}
body {
  display: flex;
  flex-direction: column;
}
header,
footer {
  background-color: #abc
}
main {
  flex: 1;
  background-color: #bada55;
  display: flex;
}
.wrapper {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: red;
}
p {
  margin: 0;
}

＆＃13;

Answer 2

加

 main {
      display: flex;
      align-items: center;
      background-color: red;
    }

html,
body {
  height: 100%;
  background-color: #ddd;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  background-color: #abc
}

main {
  flex: 1;
  background-color: #bada55;
  position: relative;
  display: flex;
  align-items: center;
  background-color: red;
}

.wrapper {
  width: 100%;
  text-align: center;
}

.item {
  flex-grow: 1;
}

p {
  margin: 0;
}

<header>HEADER</header>
<main>

  <div class="wrapper">
    <div class="item">
      <p>This should be centered both VERTICALLY & HORIZONTALLY.</p>
    </div>
  </div>

</main>
<footer>FOOTER</footer>

Flexbox孩子的垂直对齐

2 个答案: