Question

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

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

标题，内容和页脚。

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

我尝试用弹性框来解决这个问题，但只有我得到的是所有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

我已将中心文字内容设为可编辑状态，因此请对其进行编辑，并查看页眉和页脚是否与其一起展开。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

此外，FlexyBoxes工具也值得一试。

Answer 2

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

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

中间元素的垂直中心与flex

2 个答案:

running demo