Flexbugs: MS Edge：顶部/底部：自动在相对定位的弹性容器中的绝对定位元素上无法正常工作

这实际上是根据规范，绝对定位的弹性项目的静态位置就好像它是弹性容器中的唯一项目（在默认设置中，这将是 0,0）。

The static position of an absolutely-positioned child of a flex container is determined such that the child is positioned as if it were the sole flex item in the flex container, assuming both the child and the flex container were fixed-size boxes of their used size.

您看到此问题的原因是我们是目前唯一更新到最新规范语言的人。

啊哈，谢谢你让我知道，格雷格。 只有我认为新的规范语言有点违反直觉吗？ 我不确定为什么开发人员不应该假设定位与其他上下文类似。

当您第一次看到它时，我同意您的看法，但是假设您想在 abspos flex 项目上使用对齐规范中的新对齐属性？ 您需要删除由静态位置引入的偏移量才能使项目居中，这很混乱，并延续了“为什么我不能在 CSS 中居中某些内容”的古老格言。 当我们引入 grid 时，它允许您轻松地将任何元素居中，无论是否为 abspos； 如果它处于流动状态，当然要考虑它的兄弟姐妹。 为了对齐 flex 和 grid（因为它们都是现代布局），决定允许新的对齐功能在两者中工作是有意义的。 因此，如果您对启用的内容感到好奇，那么更改 - 请参阅此测试用例（两个框应该在同一个位置）： http :

基本上问题是这样的，您是因为旧布局类型的一致性限制而阻止未来的布局类型，还是启用具有更多功能的新布局类型，这些功能会引入与其他布局类型的一些不一致。 我们押注后者，因为希望在采用这些技术时，块布局仅用于设计用于文档的地方，而不是应用程序布局。 如果我们在这方面取得成功，那么由于大多数 abspos 用例是针对将使用 Grid 或 Flex 的应用程序布局，并且它们将彼此一致，因此不一致的情况就会少得多。 如果您有任何其他问题，请随时告诉我。

感谢 Greg 的深思熟虑和详细的回复，这很有帮助。

@gregwhitworth问题是有几种方法可以将 css transform: translateX(-50%) translateY(-50%); 、 margin: auto放在 flex 容器中，负边距等。

现在使用计算的 flex 位置定位内容的方式完全为零，但在正常布局之外。 这将阻止人们能够在以前可能的 flex 容器中完成许多非常标准的设计。

认识到这一点也很重要，因为无法确定内容是否在 flex 容器内，这引入了元素无法预料的新行为，而无需以某种方式知道其父容器是否为flex 。 这使得开发在所有情况下都能合理工作的组件变得非常困难。 （缺少边距折叠的 Flex 元素是另一个例子）。