Center one element along with multiple siblings

Question

I have a div with some number of spans in it, that may or may not be of equal width. I know I can use text-align: center to make all the content within a div be centered. However, I want to pick a particular span, and designate that as the true center, rather than the center being the midpoint of the sequence of spans.

One idea I had to simulate this effect was: I'd have my desired middle element with two containers to its left and right; the left one would be right-justified, and vice-versa. These containers would hold the other content in the div. If I could get these two containers to fill up the remaining space in equal amounts, this would have the effect of centering the middle element while keeping the left and right content aligned with the center. Basically, this would require the two containers' width to be set to exactly half the remaining space in the div. (I don't want to change the size of the middle div.) Is this possible to do with just CSS?

Example: with 4 spans, how to I designate span 2 as the true center?

div {
  width: 500px;
  padding: 4px;
  border: 1px dotted black;
}
span {
  display: inline-block;
  width: 100px;
  text-align: center;
  margin: 4px;
  box-sizing: border-box;
  border: 1px dotted black;
}
#b {
  /* ??? */
}

<div>
  <span id="a">1</span>
  <span id="b">2</span>
  <span id="c">3</span>
  <span id="d">4</span>
</div>

Answer 1

You can use flexbox. Based on this answer,

.outer-wrapper {
  display: flex;
  padding: 4px;
  border: 1px dotted black;
}
.item {
  margin: 4px;
  text-align: center;
  border: 1px dotted black;
}
.left.inner-wrapper, .right.inner-wrapper {
  flex: 1;
  display: flex;
  align-items: flex-start;
  min-width: -webkit-min-content; /* Workaround to Chrome bug */
}
.left.inner-wrapper {
  justify-content: flex-end;
}
.animate {
  animation: anim 5s infinite alternate;
}
@keyframes anim {
  from { min-width: 0 }
  to { min-width: 50vw; }
}

<div class="outer-wrapper">
  <div class="left inner-wrapper">
    <div class="item animate">1. Left</div>
  </div>
  <div class="center inner-wrapper">
    <div class="item">2. Center</div>
  </div>
  <div class="right inner-wrapper">
    <div class="item">3. Right</div>
    <div class="item">4. Right</div>
  </div>
</div>
<!-- Analogous to above --> <div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">1. Left</div></div><div class="center inner-wrapper"><div class="item animate">2. Center</div></div><div class="right inner-wrapper"><div class="item">3. Right</div><div class="item">4. Right</div></div></div><div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">1. Left</div></div><div class="center inner-wrapper"><div class="item">2. Center</div></div><div class="right inner-wrapper"><div class="item animate">3. Right</div><div class="item">4. Right</div></div></div><div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">1. Left</div></div><div class="center inner-wrapper"><div class="item">2. Center</div></div><div class="right inner-wrapper"><div class="item">3. Right</div><div class="item animate">4. Right</div></div></div>

This will attempt to center the desired element, but it will be pushed in case one side doesn't fit, to prevent overlapping.