带有 flex 的中间元素的垂直中心

Question

我对居中元素有非常具体的要求，所以我决定尝试使用 flexbox。

请求如下。我有 3 个元素垂直堆叠。

页眉、内容和页脚。

一个特殊的条件是中间元素“内容”位于页面中心（垂直和水平方向），页眉从上到下都贴在页脚上。它应该适用于窗口调整大小。 有更好的演示硬编码解决方案。 http://codepen.io/anon/pen/oXjVmE

我试图用 flex box 来解决这个问题，但我得到的只是所有 3 个元素都居中。

我正在寻找如何告诉 flex-box “第一个和最后一个元素应该相同并且最大可能高度” http://codepen.io/anon/pen/GJpeYY

html

<div class="wrapper">
  <div class="header">
    <h1>Header</h1>
    <h2>Subheader</h2>
    <p>Text</p>
  </div>
  <div class="centered">
    Centered Text
  </div>
  <div class="footer">
    Some tiny footer
  </div>
</div>

css

.wrapper {
  height:500px;
  background-color:lightgreen;
  .display(flex);
  .flex-direction(column);
  .align-items(center);
  .justify-content(center);
  text-align: center;
}

.header {
   background-color:gold;
}

.centered {
  height: 50px;
  line-height: 50px;
  background-color:deepskyblue;
}

.footer {
  background-color:tomato;
}

Answer 1

您可以通过简单地使用flex: inline-flex 并添加一个外部容器来实现该结果，如下所示

running demo

我已将居中的文本内容设为可编辑，因此编辑它并看到页眉和页脚随之延伸。

.container {
  text-align: center;
  background-color: lightgreen;
}
.wrapper {
  height: 500px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}
.header {
  background-color: gold;
}
.centered {
  height: 50px;
  line-height: 50px;
  background-color: deepskyblue;
}
.footer {
  background-color: tomato;
}

<div class="container">
  <div class="wrapper">
    <div class="header">
      <h1>Header</h1>
      <h2>Subheader</h2>
      <p>Text</p>
    </div>
    <div class="centered" contentEditable="true">
      Centered Text - I'm editable, so... EDIT ME !!!!
    </div>
    <div class="footer">
      Some tiny footer
    </div>
  </div>
</div>

FlexyBoxes 工具也值得一试。

Answer 2

删除包装height:500px;并添加height:100vh;

这是视口高度，我希望你能得到你想要的。