布局flexbox问题

Question

我想要一个非常简单的布局，但我不能让它工作

<div class="page-wrapper">
    <div class="top-half">
        <div class="center-me-vertically-and-horizontally"></div>
    </div>
    <div class="bottom-half">
        <div class="center-me-vertically-and-horizontally"></div>
    </div>
</div>

使用flexbox（列）可以轻松实现

页面包装器和上半部/下半部但是如何在半容器内垂直和水平地获取叶子节点中心？谢谢！

Answer 1

你可以润滑弹性盒子：

html, body, .page-wrapper {
  height:100%;
  margin:0;
  }
.page-wrapper {
  display:flex;
  flex-direction:column;
  }
.top-half , .bottom-half {
  display:flex;
  flex:1;
    align-items:center;
  justify-content:center;
  box-shadow: 0 0 0 1px ; /* lets see them */
  }

<div class="page-wrapper">
    <div class="top-half">
        <div class="center-me-vertically-and-horizontally">top</div>
    </div>
    <div class="bottom-half">
        <div class="center-me-vertically-and-horizontally">bottom</div>
    </div>
</div>