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

【问题标题】：Center horizontally a flex item when adjacent items are not the same size当相邻项目的大小不同时，将弹性项目水平居中
【发布时间】：2016-04-10 08:31:28
【问题描述】：

我有一个里面有 3 个 div 的部分元素，我想水平居中 'div 2'，但问题是相邻的 div 大小不一样，所以“justify-content:center”不起作用。

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

以下是相关代码：

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;
}

这里也是codepen。

我的目标是居中 'div2' 并将其余的 div 分别移动到左右边缘。

任何帮助将不胜感激。

【问题讨论】：

linked answer 中的解决方案对您不起作用，只是因为您的代码中有语法错误。这是不正确的：transform(translateX:-50%,0); 应该是 transform: translateX(-50%); 或 transform: translate(-50%,0);。任何一个都有效；他们是等价的。 Revised Codepen
天啊，我看了好几遍代码都没发现这个错误，谢谢指正。此外，@Michael_B 那里的信息很棒，通过阅读我学到了很多东西。

标签： html css flexbox

【解决方案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;
 }

【讨论】：

【解决方案2】：

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

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;
}

Codepen here

或者您可以采用更兼容浏览器的老式方式，同时保持您的 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 Here

【讨论】：