CSS：具有顶部和中心对齐 div 的 flexbox 容器 [重复]答案

【问题标题】：CSS: flexbox container with top & center aligned divs [duplicate]CSS：具有顶部和中心对齐 div 的 flexbox 容器 [重复]
【发布时间】：2018-03-03 03:07:45
【问题描述】：

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

它确实有效，有点：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 在中心对齐？目前它上面有空间它在所需高度以下对齐

我觉得这与在父容器中正确使用 align-content 有关，但我似乎无法弄清楚。

【问题讨论】：

标签： html css flexbox css-position

【解决方案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>

【讨论】：

感谢您的解决方案！我很惊讶整个 flexbox 标准仍然存在缺陷——这是一种绝对基本的定位类型，底线是：它不能用 flexbox 完成。要么您必须按照您的说明进行操作，要么按照重复问题中的说明进行操作并使用隐藏元素 - 这是一个非常丑陋的黑客恕我直言。
@BM，实际上，这并不是 flexbox 的缺陷。你只是想让 flexbox 做一些它不打算做的事情。 Flexbox 通过容器中的空间分布来对齐项目。当空间不均匀时，对齐会不均匀。就是这么简单。
如果您正在寻找一个干净的解决方案，那么 CSS Grid 可以很好地工作：jsfiddle.net/zeo29uLa/2
我很欣赏您的网格示例 - 但它如何使“中心”行居中，同时使“顶部”的内容真正对齐在最顶部？基本上使第三行成为上面讨论的“不可见元素”？
Grid 示例中没有不可见的项目。只有你有的两个。布局通过创建一个三行网格来工作（请参阅我发布的演示）。底行仍然是空的。