对齐两个弹性项目：一个到顶部，另一个居中

Question

如何实现这一目标？

#top必须始终位于顶部并填充100％的包装宽度。

#center必须放在中间 - 垂直和水平。

#wrap {
  display: flex;
  flex-direction: column;
  background: #D8D8D8;
  height: 400px;
  align-content: center;
}
#top {
  background: #F5A623;
  width: 100%;
}
#center {
  background: #4A90E2;
  align-self: center;
}

编辑：我发现只有以div为中心的解决方案。但我不知道如何在顶部放置一些东西，在中心放置一些东西。

Answer 1

为了使#center元素在flex容器中完美居中，同时在顶部放置另一个元素，有两种方法可以做到这一点：

1. 引入第三个（“幻影”​​）元素以创建平衡，或
2. 绝对定位#center元素。

（这些相同的方法可用于将一个项目居中并将另一个元素固定到底部。）

如果#center元素是容器中的 only flex项，则很容易将其居中。以下两种方法中的任何一种都足够了：

#wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

OR

#center {
    margin: auto;
}

除 外，容器中的第二个弹性项占据顶部的空间。这意味着上面的中心方法 - 基于容器中自由空间的分布 - 将不准确。它们会将#center元素放在剩余空间内，但不会放在整个空间内（因为#top占用的空间因此被排除在计算之外）。

在下面的演示中，#center完全居中于灰色区域，但不在整个弹性容器中，其中包括橙色区域：

DEMO 1

#center元素看起来居中，这可能足以满足您的需要，但它并不是精确居中的。它垂直偏离50px，这是#top元素的高度。

因此必须使用另一种考虑#top空间的居中方法。

方法＃1：引入第三个“幻影”元素以实现平衡

此方法涉及创建与#top具有相同高度的第三个弹性项目。我们将这个新项目放在#center的另一侧，以在两侧创造平衡的空间平衡。然后，我们使用visibility: hidden隐藏此项目。

<强> HTML

<div id="wrap">
    <div id="top"></div>
    <div id="center"></div>
    <div id="bottom"></div><!-- invisible flex item -->
</div>

CSS （相关部分）

#top {
    flex: 0 0 50px;
    width: 100%;
    background-color: orange;
}

#center {
    margin: auto;
    width: 200px;
    height: 300px;
    background-color: aqua;
}

#bottom {
    flex: 0 1 50px;
    visibility: hidden;
}

现在#center完全集中在flex容器中。

DEMO 2

方法＃2：绝对定位`＃center`元素

Flexbox允许absolute positioning of flex items。这意味着我们可以从文档流中删除#center并将其相对于其父项定位。

<强> HTML

<div id="wrap">
    <div id="top"></div>
    <div id="center"></div>
</div>

CSS （相关部分）

#wrap {
    position: relative;
}

#center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

虽然这种方法不需要额外的弹性项目（如方法＃1） - 并且仍然可以实现完美的居中 - 通过从文档流中删除此项目，它可以与其他元素重叠。

DEMO 3

Answer 2

您可以使用HTML中的一个额外元素来执行此操作，这些元素基本上会填充标题后的空格。然后，您的内容可以在该填充空间内居中。

＆＃13;

＆＃13;

#container {
  display: flex;
  flex-flow: flex-wrap;
  flex-direction: column;
  
  border: 1px solid black;
  height: 150px;
  justify-content: flex-start;
}

#content {
  background: yellow;
  height: 100%;
  display: flex;
  justify-content: center;
}

#centered {
  background: red;
  height: 30px;
  align-self: center;
}

#header {
  background: green;
}

＆＃13;

<div id="container">
  <div id="header">This is footer content.
  </div>
  <div id="content">
    <div id="centered">
      This is centered content.
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;