CSS 浏览器不一致：居中 flexbox 内 abs 元素的边距

Question

我在对带边距的绝对定位元素计算 "flex center" 时发现浏览器不一致。这是 codepen，这是 HTML

<style>
div {
  height:100px;
  width:400px;
  border:1px solid black;
  display:flex;
  justify-content: center;
  align-items: center;
}   
p {
  position:absolute;
  margin:0;
  padding:0;
  margin-top:50px;
  font-size:50px;
}
</style>
<body>
  <div>
    <p>This is some text</p>
  </div>
</body>

在 Chrome 和 Edge 中查看时，文本元素位于 div 的底部。但在 Opera 和 Firefox 中查看时，文本元素位于边框下方。

似乎有些浏览器仅使元素居中，而其他浏览器则使元素及其边距居中。

我的问题是...哪个浏览器以 "correct" 方式处理此问题？

Answer 1

如规范中所定义：Absolutely-Positioned Flex Children

As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout.

CSS 浏览器不一致：居中 flexbox 内 abs 元素的边距

CSS browser inconsistency: Margins on abs element inside a centered flexbox

css

browser

margin

absolute

flexbox