Question

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

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

我的问题是...哪个浏览器正在以“正确”的方式进行处理？

Answer 1

根据规范中的定义：Absolutely-Positioned Flex Children

由于流量不足，Flex容器的绝对定位子项不会参与Flex布局。

CSS浏览器不一致：居中的Flexbox中的Abs元素的边距

1 个答案: