CSS Centering Problem

by seanofw

HTML

<div class="desired">

<h3>Desired behavior:</h3>

Consider a row-like container element and three children, "left", "right", and "center".<br />
The children may be of varying widths, but they are all the same height.<br /><br />

"Center" should try to stay centered <em>relative to its container</em> — but the three sibling<br />
elements must never overlap, and may push outside the container if necessary.<br /><br />

So for wide containers, "center" is centered relative to the container<br />
(i.e., its siblings' widths do not matter):
<div class="container wide-container-hackaroonie">
  <span class="left">I'm the left content.</span>
  <span class="center">I'm the center content.  I'm longer than the others.</span>
  <span class="right">Right.</span>
</div>
<div class="center-mark wide-container-hackaroonie-center-mark">^</div>

<br />

For narrower containers, "center" abuts the widest sibling, but does not overlap.<br />
The remaining space is distributed between the narrow sibling and "center".<br />
Notice that the container's midpoint is no longer the same as "center's" midpoint.<br />
<div class="container narrow-container-hackaroonie">
  <span class="left">I'm the left content.</span>
  <span class="center">I'm the center content.  I'm longer than the others.</span>
  <span class="right">Right.</span>
</div>
<div class="center-mark narrow-container-hackaroonie-center-mark">^</div>

<br />

For narrowest containers, all three siblings abut, do not overlap, and do not wrap:
<div class="container narrowest-container-hackaroonie">
  <span class="left">I'm the left content.</span>
  <span class="center">I'm the center content.  I'm longer than the others.</span>
  <span class="right">Right.</span>
</div>
<div class="center-mark narrowest-container-hackaroonie-center-mark">^</div>

<br />
You may use any HTML and CSS you want to achieve the desired behavior, but you<br />
may not use JavaScript.  You may assume a modern browser (with at least CSS...

CSS

body {
  font: 14px Arial;  
}

.container {
  border: 1px solid #00F;
  background: #00F;
}
.container > * {
  display: inline-block;
  background: #36F;
  white-space: nowrap;
  padding: 2px 4px;
  border: 1px solid #1933FF;
  color: #FFF;
}
.container > .center {
  background: #696;
  border: 1px solid #334CB2;
}

.flex-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.float-container {
  text-align: center;
  white-space: nowrap;
}
.float-container:after {
  clear: both;
  content: "";
}
.float-container .left {
  float: left;
}
.float-container .right {
  float: right;
}

.absolute-container {
  position: relative;
  top: 0;
  left: 0;
  text-align: center;
}
.absolute-container .left {
  position: absolute;
  top: 0;
  left: 0;
}
.absolute-container .right {
  position: absolute;
  top: 0;
  right: 0;
}

.desired {
  width: 0px;
  overflow: visible;
  white-space: nowrap;
}

.center-mark {
  text-align: center;
  font-size: 80%;
}

.wide-container-hackaroonie {
  width: 700px;
  position: relative;
  top: 0;
  left: 0;
  text-align: center;
}
.wide-container-hackaroonie .left {
  position: absolute;
  top: 0;
  left: 0;
}
.wide-container-hackaroonie .right {
  position: absolute;
  top: 0;
  right: 0;
}
.wide-container-hackaroonie-center-mark {
  width: 700px;
}

.narrow-container-hackaroonie {
  width: 510px;
  text-align: left;
}
.narrow-container-hackaroonie:after {
  clear: both;
  content: "";
}
.narrow-container-hackaroonie .left {
  float: left;
}
.narrow-container-hackaroonie .right {
  float: right;
}
.narrow-container-hackaroonie-center-mark {
  width: 510px;
}

.narrowest-container-hackaroonie {
  width: 400px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.narrowest-container-hackaroonie-center-mark {
  width: 400px;
}

.note {
  text-align: center;
  color: #666;
  font-style: italic;
  font-size: 90%;
}