Flexbox justify-content：中心在 Safari 中无法正常工作

Posted 2023-03-05

【中文标题】Flexbox justify-content：中心在 Safari 中无法正常工作

【英文标题】：Flexbox justify-content: center not working properly in Safari

【发布时间】：2017-12-23 23:22:26

【问题描述】：

我无法让 flexbox 和 justify-content: center 在 Safari 中正常运行。

html：

<div class="flex-row">
  <div class="label"> Label </div>
  <div class="well"></div>
</div>

CSS：

.flex-row 
  display: flex;
  flex-direction: row;
  justify-content: center;


.well 
  width: 230px;
  height: 200px;
  background-color: grey;


.label 
  z-index: 2;
  position: absolute;
  margin-top: -8px;

在 Chrome 和 FF 中，这提供了一个简单的灰色井，其上方有一个标签。但是在 Safari 中，标签不居中。在 Safari 中打开下面的 CodePen 示例以查看未居中的标签：

https://codepen.io/jklevin/pen/weLvxx

我的预感是这是由于 Safari 中的一个实现错误，但好奇是否有人知道现有的解决方法。

【问题讨论】：

相关：***.com/q/32991051/3597276

【参考方案1】：

absolute 定位不受 flexbox 正式支持，尽管它可能在某些浏览器中工作。

https://www.w3.org/TR/css-flexbox-1/#abspos-items

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

如果您希望它水平居中，只需添加一个left 并使用transform: translate() 将其向后移动50% 的宽度，您也可以使用它向上移动8px。

.flex-row 
  display: flex;
  flex-direction: row;
  justify-content: center;


.well 
  width: 230px;
  height: 200px;
  background-color: grey;


.label 
  z-index: 2;
  position: absolute;
  left: 50%;
  transform: translate(-50%,-8px);

<div class="flex-row">
  <div class="label"> Label </div>
  <div class="well"></div>
</div>
    

【讨论】：

谢谢！完美运行。

实际上，如果这是页面上唯一的元素，这很好用，但是如果我想将这个 Well 构建为一个独立的可重用组件，并且在一行中包含多个它们怎么办？使用left: 50% 意味着一排孔中的所有标签都将堆叠。见：codepen.io/jklevin/pen/weLvxx

@jklevin 不客气。您可以通过多种方式做到这一点，我会这样做codepen.io/mcoker/pen/Kqjwxz

有道理。感谢您的帮助！