将弹性项目内的绝对元素居中对齐

Question

我正在尝试水平对齐弹性项目内的两个绝对定位元素。

这是我目前的CodePen

HTML：

<div class="stepper-wrapper">
  <ul class="step-wrapper" >
    <li class="step__bubble"></li>
    <li class="step__circle"></li>
  </ul>
  <ul class="step-wrapper" >
    <li class="step__bubble"></li>
    <li class="step__circle"></li>
  </ul>
</div>

CSS：

.stepper-wrapper {
  display: flex;
  flex-direction: row;
}
ul {
  border: 1px solid grey;
  height: 0px;
  position: relative;
  top: 40%;
  min-width: 100px;
  flex: 1;
  li.step__bubble {
    display: inline-block;
    vertical-align: middle;
  }
  li.step__bubble::before {
    content: "";
    position: absolute;
    top: -9px;
    left: calc(50%);
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid grey;
    border-radius: 50%;
    background: white;
  }
  li.step__circle {
    width: 8px;
    height: 8px;
    border: 1px solid red;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: -4px;
    left: calc(50% + 1px);
  }
}

我想做的是：

• 让灰色圆圈垂直和水平对齐 线。 Vertically 并不是真正的 pb，我可以设置一个固定值，因为 .stepper-wrapper 的高度将是固定的。横向需要具有适应性，而这正是我所困的地方。
• 在灰色圆圈内有红色圆圈

我尝试使用calc() 函数并将两个圆圈都设置为(50% - width_of_element_in_px/2)，但我不知道为什么，每个像素似乎约为10px。

感谢您的帮助

Answer 1

欢迎加入由calc() 和字符串插值法拥有的 LESS 用户俱乐部
5 年来我一直在使用 LESS，但它仍然不时发生 :(

Sooo tl;dr calc() 过去和现在都是一个 LESS 函数，它的编译器会很高兴地输出一些结果（可能是 50% + 10(stripped) => 60%）。
如果你想让LESS编译器输出calc()CSS Level 3函数，你需要escape它，也就是包裹在~"calc(50% + 5px)"中！

Codepen

编辑：另见https://stackoverflow.com/a/17904128/137626
EDIT2：在 LESS 文档 oO 中找不到关于 calc 的条目，但问题在 http://lesscss.org/usage/#command-line-usage-options 中进行了解释（在文本中搜索“calc”）。 strict-math 是一个很酷的选项，但您必须确保其他人都已激活它（默认情况下不会是这种情况）