CSS：带有top＆amp; amp;的Flexbox容器中心对齐的div

Question

我正在尝试创建一个顶部和中心对齐div的布局。

确实有用，有点：https://jsfiddle.net/zeo29uLa/

<div class="flexbox-container">
  <div class="top-item">
    top
  </div>
  <div class="center-item">
    center
  </div>
</div>

<style>
  body {
    height: 50vh;
  }
  .top-item {
    flex: 1 0 100%;
    text-align: center;
    align-self: flex-start;
  }
  .center-item {
    align-self: center;
  }
  .flexbox-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    justify-content: center;
    height: 100%;
    flex-wrap: wrap;
  }
</style>

我的问题和问题：如何精确地使中心div对齐在中心？目前在其上方有空间＆lt; =＆gt;它在所需高度以下对齐

我觉得这将是关于父容器中align-content的正确用法，但我似乎无法弄明白。

Answer 1

您可以定位 top-item为absolute，然后将align-content: center添加到Flexbox容器中 - 请参阅下面的演示：

  body {
    height: 50vh;
    background: blue;
  }
  .top-item {
    flex: 1 0 100%;
    text-align: center;
    align-self: flex-start;
    position: absolute; /* ADDED */
  }
  .center-item {
    align-self: center;
  }
  .flexbox-container {
    display: flex;
    background: green;
    justify-content: center;
    height: 100%;
    flex-wrap: wrap;
    align-content: center; /* ADDED */
    position: relative; /* ADDED */
  }

<div class="flexbox-container">
  <div class="top-item">
    top
  </div>
  <div class="center-item">
    center
  </div>
</div>