在flexbox中将一个元素保持在两个不同宽度元素之间的中心位置

Question

我正在制作音乐播放控制器,容器有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

您可以使用边距来近似居中.但是为了在各种视口中保持一致的flexbox完美居中,你必须稍微修改一下你的HTML.

你需要把直接孩子#container到Flex容器本身有一个display:inline-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>