对齐两个flex项：一个到顶部，另一个居中 [英] Aligning two flex items: one to the top, the other centered

问题描述

如何实现？

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

#top must be always at the top and fill 100% width of wrapper.

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

#center must be placed in the center - vertically and horizontally.

#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为中心的解决方案。

edit: I've found only solutions that centers div. But I don't know how to place something at the top and something in the center.

推荐答案

为了完美地将中心放置在中心，在Flex容器中有 #center 元素，而在顶部有另一个元素，有两种方法可以做到这一点：

In order to perfectly center the #center element in the flex container, while having another element at the top, there are two ways you could do this:

1. 引入第三个（幻影​​）元素以创建平衡余额，或


2. 将 #center 元素。

1. Introduce a third ("phantom") element to create equal balance, or
2. Absolutely position the #center element.

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

(These same methods could be used to center one item and fix another element to the bottom.)

如果 #center 是容器中的仅 flex项目。以下两种方法之一就足够了：

It would be easy to center the #center element if it were the only flex item in the container. Either of the following two methods would suffice:

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

或

#center {
    margin: auto;
}

是容器中的第二柔性物品占据顶部的空间。这意味着上面的中心方法–其基于容器中的自由空间的分布–将不准确。它们将 #center 元素放在剩余空间中，但不在整个空间内（因为 #top 占用

Except there is a second flex item in the container occupying space at the top. This means that the centering methods above – which are based on the distribution of free space in the container – won't be precise. They will center the #center element inside the remaining space, but not inside the entire space (because #top is occupying space which, as a result, is excluded from the calculation).

在下面的演示中， #center 是完全集中在灰色区域，但不在整个flex容器，其中包括橙色区域：

In the following demo, #center is perfectly centered in the gray area, but not in the entire flex container, which includes the orange area:

DEMO 1

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

The #center element looks centered, and that may be enough for your purposes, but it's not precisely centered. It's off vertically by 50px, which is the height of the #top element.

因此，另一个居中方法必须

So another centering method must be used that takes the #top space into consideration.

此方法涉及创建与 #top 。我们将此新项目放置在 #center 的另一侧，以在两侧创建相等的空间平衡。然后，用 visibility：hidden

This method involves creating a third flex item with the same height as #top. We place this new item on the other side of #center to create an equal balance of space on both sides. We then hide this item with 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容器中完全居中。

Now #center is perfectly centered in the flex container.

DEMO 2

Flexbox允许 flex项目的绝对定位。这意味着我们可以从文档流程中删除 #center ，并将其相对于其父项位置。

Flexbox allows for the absolute positioning of flex items. This means we could remove #center from the document flow and position it relative to its parent.

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%);
}

虽然此方法不需要额外的flex项目1）–并仍然实现完美的中心–通过从文档流中删除此项，它可以与其他元素重叠。

Although this method doesn't require an extra flex item (like in Method #1) – and still achieves perfect centering – by removing this item from the document flow it can overlap other elements.

DEMO 3

这篇关于对齐两个flex项：一个到顶部，另一个居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！