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

Question

I am making a music playback controller, and the container has 3 sections: left, center, and right. However, since the left and right sides have different widths, the center section isn't in the true center of the div, but I need it to be. I am using flexbox's space-between option to layout the items.

 #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

You can use margins to approximate centering. But in order to get perfect centering with flexbox that's consistent across a variety of viewports, you'll have to slightly modify your HTML somewhat.

You need to turn the direct children of #container into flex containers themselves with a display:inline-flex declaration and give them a flex value of 1 and justify-content: center .

From there, you add your content into child divs. To get alignment on the left and right divs, use margin-right: auto and margin-left: auto , respectively.

 #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>