当相邻项目的大小不同时，将弹性项目水平居中

Question

我有一个section元素，里面有3个div，我想水平居中'div2'，但问题是adyacentdiv的大小不一样，所以"justify-content:center"不起作用。

我知道这里（标题为"当相邻项目的大小不同时，将弹性项目居中"）是一个解决方案，但它对我不起作用。

这是启示码：

HTML

<section>
  <div id="div1">DIV 1</div>
  <div id="div2">DIV 2</div>
  <div id="div3">DIV 3</div>
</section>

CSS

section{
  display:flex;   
  position:relative;      
}   
#div1{          
  width:260px; 
}
#div2{    
  position:absolute;  
  left:50%;
  transform(translateX:-50%,0);  
}
#div3{    
  margin-left:auto;
  width:50px;
}

这也是一个代码笔。

我的目标是居中"div2"，并将其余的divs分别移到左边缘和右边缘。

如有任何帮助，我们将不胜感激。

Answer 1

  <section>   
    <div id="div1">DIV 1</div>
    <div id="div2_wrap">
      <div id="div2">DIV 2</div>
    </div>
    <div id="div3">DIV 3</div>
  </section>

 section{
   display: flex;
   position:relative; 
   padding:5px;
   height: 500px;
   background:yellow;
 }
 div{
   padding:5px; 
   background:coral;
 }
 #div1{         
   width:260px; 
 }
 #div2_wrap{  
   position: absolute;
   left:50%;
   height: 100%;
   align-items: center;
   display: flex;
 }
 #div2 {
   background-color: #000fff;
 }
 #div3{    
   margin-left:auto;
   width:50px;
 }

Answer 2

您可以将div包裹在另一个父div上，并首先将它们设置为具有相等的宽度。然后将你的孩子div在它的父母体内对齐。像这样：

HTML:

<section>
  <div class="wrapper" id="div1">
    <div class="innerDiv">DIV 1</div>
  </div>
  <div class="wrapper" id="div2">
    <div class="innerDiv">DIV 2</div>
  </div>
  <div class="wrapper" id="div3">
    <div class="innerDiv">DIV 3</div>
  </div>
</section>

CSS：

section{
  display:flex;
  padding:5px;
  background:yellow;
  text-align:center;
}
.wrapper{
  display:flex;
  flex-grow:1;
  flex-wrap:wrap;
}
.innerDiv{
  padding:5px; 
  background:coral;
}
#div1{
  justify-content:flex-start;
}
#div1 .innerDiv{
  flex:1;
}
#div2{
  justify-content:center;
}
#div3{
  justify-content:flex-end;
}
#div3 .innerDiv{
  width:50px;
}

在此处打开代码

或者你可以采用老式的更兼容浏览器的方式，同时保持你的HTML代码不变。

section {
  padding: 5px;
  background: yellow;
  text-align: center;
  position: relative;
  float: left;
  box-sizing: border-box;
  width: 100%;
}
div {
  padding: 5px;
  display: inline-block;
  background: coral;
}
#div1 {
  width: 260px;
  float: left;
}
#div2 {
  left: 50%;
  margin-left: -0.5em;
  position: absolute;
}
#div3 {
  float: right;
  width: 50px;
}

Codepen此处