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

问题描述

如何实现这一目标?

#top 必须始终位于顶部并填充包装器的 100% 宽度.

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

#wrap {显示:弹性；弹性方向:列；背景:#D8D8D8；高度:400px；对齐内容:居中；}#最佳 {背景:#F5A623；宽度:100%；}#中央 {背景:#4A90E2；对齐自我:居中；}

我只找到了以 div 为中心的解决方案.但我不知道如何在顶部和中间放置一些东西.

解决方案

为了让 #center 元素在 flex 容器中完美居中，同时让另一个元素在顶部，有两种方法你可以这样做:

1. 引入第三个(幻影"​​)元素来创造平等的平衡，或者
2. 绝对定位 #center 元素.

(这些相同的方法可用于将一个项目居中并将另一个元素固定在底部.)

<小时>

如果 #center 元素是容器中唯一的 flex 项目，那么将它居中会很容易.以下两种方法中的任何一种就足够了:

#wrap {显示:弹性；对齐内容:居中；对齐项目:居中；}

或

#center {保证金:自动；}

除了容器中有第二个弹性项目占据顶部的空间.这意味着上面的居中方法它们基于容器中空闲空间的分布–不会很准确.它们会将 #center 元素居中在剩余空间内，但不在整个空间内(因为 #top 占据空间，因此被排除在计算之外).

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

演示 1

#center 元素看起来居中，这可能足以满足您的目的，但它并没有精确居中.它垂直偏离 50 像素，这是 #top 元素的高度.

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

<小时>

方法#1:引入第三个幻影"元素以实现平衡

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

HTML

<div id="顶部"></div><div id="center"></div><div id="bottom"></div><!-- 不可见的弹性项目-->

CSS(相关部分)

#top {弹性:0 0 50px；宽度:100%；背景颜色:橙色；}#中央 {保证金:自动；宽度:200px；高度:300px；背景颜色:浅绿色；}#底部 {弹性:0 1 50px；可见性:隐藏；}

现在 #center 在 flex 容器中完美居中.

演示 2

<小时>

方法#2:绝对定位`#center` 元素

Flexbox 允许 弹性项目的绝对定位.这意味着我们可以从文档流中删除 #center 并将其相对于其父级定位.

HTML

<div id="顶部"></div><div id="center"></div>

CSS(相关部分)

#wrap {位置:相对；}#中央 {位置:绝对；左:50%；顶部:50%；变换:翻译(-50%，-50%)；}

虽然这个方法不需要额外的弹性项目(就像方法#1)–并且仍然实现完美的定心 -ndash;通过从文档流中删除此项，它可以与其他元素重叠.

演示 3

How to achieve this?

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

#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;
}

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.

解决方案

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. 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.)

---

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

OR

#center {
    margin: auto;
}

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).

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

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.

---

Method #1: Introduce a third "phantom" element for equal balance

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 (relevant section)

#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;
}

Now #center is perfectly centered in the flex container.

DEMO 2

---

Method #2: Absolutely position the `#center` element

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 (relevant sections)

#wrap {
    position: relative;
}

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

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屋！