CSS 浏览器不一致：居中弹性框内的 abs 元素的边距答案

【问题标题】：CSS browser inconsistency: Margins on abs element inside a centered flexboxCSS 浏览器不一致：居中弹性框内的 abs 元素的边距
【发布时间】：2019-10-27 07:03:51
【问题描述】：

在计算带有边距的绝对定位元素上的“弹性中心”时，我发现浏览器不一致。这是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 中查看时，文本元素位于边框下方。

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

我的问题是……哪个浏览器以“正确”的方式处理这个问题？

【问题讨论】：

标签： css browser flexbox margin absolute

【解决方案1】：

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

因为它是外流的，所以一个 flex 容器的绝对定位子容器不参与 flex 布局。

【讨论】：

那为什么两个浏览器都是水平居中的呢？它是 |----abs elem----|。如果 abs 子级不应该参与 flex，那么元素不应该在父级的左侧吗？ IE。如果 justify-content 和 align-items 不存在，它会在哪里？嗯，我的意思是我想这无论如何都是 hacky...感谢 w3 参考！