css - 布局 flexbox : how to get the leaf nodes centered vertically and horizontally within the half-containers?

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>

page-wrapper 和 top-half/bottom-half 使用 flexbox(列)很容易实现，但是如何让叶节点在半容器内垂直和水平居中？

Answer 1

你可以给 flex boxes 加上标签:

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>