html - 带有 flex 的中间元素垂直居中

Question

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

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

页眉、内容和页脚。

一个特殊的条件是中间元素“content”以页面为中心(垂直和水平)，页眉和页脚从上到下粘在上面。它应该适用于窗口调整大小。有硬编码的解决方案可以更好地演示。 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

我已将居中的文本内容设置为可编辑，因此对其进行编辑，您会看到页眉和页脚会随之拉伸(stretch)。

.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对于这类事情，工具值得一试。