如何让flex容器中中间div固定居中，不受左右文本变化影响？

这个问题的核心在于justify-content: space-between会根据子元素的宽度动态分配元素间的空隙，所以左右元素的文本长度变化时，中间元素的位置自然会跟着偏移。要实现中间元素始终居中，同时右侧元素过长时自动截断，我们可以调整布局策略：

完整实现代码 #

<div class="container">
  <div class="div1">Text1</div>
  <div class="div2">Text2</div>
  <div class="div3">AnotherText3ThatIsVeryLongAndNeedsToBeTruncated</div>
</div>

.container {
  display: flex;
  position: relative; /* 为中间元素的绝对定位提供参考坐标系 */
  width: 100%; /* 确保容器占满可用宽度 */
}

.div1 {
  flex: 1; /* 左侧元素独占左侧所有可用空间 */
  text-align: left; /* 文本左对齐 */
}

.div2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 通过位移实现精准水平居中 */
  white-space: nowrap; /* 防止中间文本换行，避免位置偏移 */
}

.div3 {
  flex: 1; /* 右侧元素独占右侧所有可用空间 */
  text-align: right; /* 文本右对齐 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 超出时显示省略号 */
  white-space: nowrap; /* 强制文本不换行，保证截断效果 */
}

方案细节解释 #

1. 容器设置position: relative：让中间的.div2能基于容器进行绝对定位，确保居中的参考系是整个容器而非页面。
2. 中间元素的居中技巧：left: 50%让元素左边缘对齐容器中点，再用transform: translateX(-50%)把元素整体左移自身宽度的一半，实现完美居中，完全不受左右元素宽度变化的影响。
3. 左右元素的自适应空间：flex: 1让左右元素各自占据容器两侧的可用空间，右侧元素文本过长时，只会占用自己这侧的空间，不会挤压中间元素。
4. 右侧文本的截断逻辑：overflow: hidden、text-overflow: ellipsis和white-space: nowrap三者组合，实现文本超出容器宽度时自动截断并显示省略号的效果。

这样调整后，不管左侧或右侧元素的文本内容如何变化，中间的.div2都会稳稳保持在容器中心，右侧的超长文本也会按预期截断。

内容的提问来源于stack exchange，提问作者rkumar310