By using the d-flex, justify-content-center, and flex-grow-1 classes, I was able to achieve my desired layout with just 3 divs.
<div class="row bg-primary d-flex justify-content-center">
<div class="col-auto">
LEFT
</div>
<div class="col-auto flex-grow-1 text-center">
Middle
</div>
<div class="col-auto">
Right
</div>
</div>
https://i.stack.imgur.com/frVcQ.png
Now, I am trying to achieve a similar effect with only 2 divs. I want the middle one to be perfectly centered. However, removing the 'Right' element causes the center calculation to be off.
<div class="row bg-primary d-flex justify-content-center">
<div class="col-auto">
LEFT
</div>
<div class="col-auto flex-grow-1 text-center">
Middle
</div>
</div>
https://i.stack.imgur.com/UG2ud.png
Is there a way to make sure "Middle" is perfectly centered while allowing the Left or Right divs to expand as needed? Similar to having the positions of Left and Middle match the original image but without the 'Right' div.
Check out the Fiddle here: http://jsfiddle.net/4a7tLf0m/
I have found that I can achieve the same effect by specifying column sizes (col-3 instead of col-auto). However, I prefer not to be so explicit. Is this the only solution?