Center horizontally a flex item when adjacent items are not the same size

Question

I have a section element with 3 divs inside, I want to center horizontally 'div 2', but the problem is the adyacent divs are not the same size so "justify-content:center" doesn't works.

I know here (under the title "Center a flex item when adjacent items vary in size") is a solution, but it doesn't work for me.

Here is the revelant code:

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

Here is also a codepen.

My goal is center 'div2' and move the rest of divs to the left and right edges respectively.

Any help would be appreciated.

The solution in the [linked answer](http://stackoverflow.com/a/33856609/3597276) doesn't work for you only because you have a syntax error in your code. This is not correct: `transform(translateX:-50%,0);` It should be `transform: translateX(-50%);` OR `transform: translate(-50%,0);`. Either one works; they're equivalent. [**Revised Codepen**](http://codepen.io/anon/pen/LNQYKZ) — Michael Benjamin, Apr 09 '16 at 23:30
Omg, I look at the code several times and never notice that mistake, thanks for the correction. Moreover, awesome info there @Michael_B, I've learned a lot by reading it. — GhostOrder, Apr 10 '16 at 01:10

score 0 · Answer 1 · answered Apr 09 '16 at 23:31

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

score 0 · Answer 2 · answered Apr 10 '16 at 00:31

You can wrap your divs around another parent div and set them to have equal widths first. Then align your children divs inside it's parent. Like this:

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

Or you can go with the old school more browser compatible way, and also keeping your HTML code same.

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

Center horizontally a flex item when adjacent items are not the same size

2 Answers2