水平居中 DIV，每侧 DIV 宽度不均匀

Question

有没有办法使 div 水平居中，如下所示？

请注意，深灰色按钮正好居中，并且每一侧的链接都与该居中按钮左对齐或右对齐。左右链接不影响居中按钮的“居中性”

我以一种我认为不是最好的方式解决了它 here on CodePen - 只需将带有链接的 DIV 设置为相同的像素宽度。我不喜欢这个，因为它有点依赖于幻数。我也想知道宽度是否可以使用 calc() 并减去深灰色按钮宽度的一半 - 但 calc() 没有完全支持，所以我认为这不会比我目前的解决方案更进一步。< /p>

我在上面的 CodePen link 中使用的 CSS：

  background-color: #ccc;
  display: flex;
  justify-content: center;
}

.top-head-links {
  display: flex;
  width: 1200px;
  justify-content: center;

  .top-head-left-links, .call-button, .top-head-right-links {
    padding: 1rem;
  }
  
  .top-head-left-links, .top-head-right-links {
    width: 400px;
  }
  
  .top-head-left-links {
    display: flex;
    justify-content: flex-end;
  }
  ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;

    li {
      margin-right: 1rem;

      &:last-of-type {
        margin-right: 0;
      }
    }
  }
  
  .call-button {
    background-color: gray;
    display: inline-block;
    color: #fff;
  }
}

我的问题：Flexbox 或 Grid 是否允许以这种方式将深灰色按钮居中？

我无法获得 Flexbox - align-self: center;在深灰色按钮上产生如上图所示的效果