html - 在 flexbox 中保持一个元素居中于两个不同宽度的元素之间

Question

我正在制作一个音乐播放 Controller ，容器有 3 个部分:左、中和右。但是，由于左侧和右侧的宽度不同，所以中间部分不在 div 的真正中心，但我需要它。我正在使用 flexbox 的 space-between 选项来布置元素。

#container {
    display: flex;
    justify-content: space-between;
    background-color: lightgrey;
}

#container > div {
  height: 100px;
  border: 2px dashed red;
  
  /*This is only for looks*/
  text-align: center;
  padding: 5px;
}

<div id="container">
  <div>Left Side</div>
  <div>I want this centered</div>
  <div>Right Side (Extra text for extra length)</div>
</div>

Answer 1

您可以使用边距来近似居中。但是，为了通过在各种视口(viewport)中保持一致的 flexbox 实现完美的居中，您必须稍微修改您的 HTML。

您需要使用 display:inline-flex 声明将 #container 的直接子级本身变成 flex 容器，并给它们一个 flex 1 和 justify-content: center 的值。

从那里，您可以将您的内容添加到子 div 中。要在左右 div 上对齐，请分别使用 margin-right: auto 和 margin-left: auto。

#container {
  display: flex;
  background-color: lightgrey;
}
.flex {
  flex: 1;
  display: inline-flex;
  justify-content: center;
}
.flex > div {
  height: 100px;
  border: 2px dashed red;
  text-align: center;
  padding: 5px;
}
.left div {
  margin-right: auto;
}
.right div {
  margin-left: auto;
}

<div id="container">
  <div class="left flex">
    <div>Left Side</div>
  </div>
  <div class="center flex">
    <div>I want this centered</div>
  </div>
  <div class="right flex">
    <div>Right Side (Extra text for extra length)</div>
  </div>
</div>