如何在父容器存在左侧div时仅用flex布局让第二个div相对父容器居中

可以实现，仅用Flex布局就能满足你的需求，以下是两种符合要求的实现方案：

方案一：无需修改HTML结构，仅调整CSS（仅用position: relative，不属于你禁用的absolute定位） #

修改后的CSS代码如下：

.parent {
  width: 100%;
  display: flex;
  background: antiquewhite;
  height: 50px;
  align-items: center; /* 可选，实现内容垂直居中 */
}

.left {
  flex: 0 0 auto; /* 等价于你原来的flex-basis:auto + flex-shrink:0配置 */
  border: solid 2px red;
}

.right {
  display: flex;
  justify-content: center;
  border: solid 2px green;
  /* 删除原有的width:100%，新增以下两行 */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

原理：让右侧元素先偏移到父容器水平50%的位置，再向左回移自身宽度的一半，实现自身中心与父容器中心重合。相对定位不会脱离文档流，也不会影响左侧元素的正常布局。

方案二：完全不使用任何position属性，纯Flex属性实现，需新增1个空占位元素 #

修改后的HTML代码：

<div class='parent'>
  <div class='left'>
    <span>Text 123 Text 123 Text 123</span> <!-- 给左侧内容套一层标签避免折行 -->
  </div>  
  <div class='right'>Text 321 Text 321 Text 321</div>
  <div class="spacer"></div> <!-- 新增空占位元素 -->
</div>

对应修改后的CSS代码：

.parent {
  width: 100%;
  display: flex;
  background: antiquewhite;
  height: 50px;
  align-items: center;
}

.left {
  flex: 1; /* 和右侧占位元素平分剩余宽度 */
  border: solid 2px red;
}

.left span {
  white-space: nowrap; /* 保证左侧内容不折行 */
}

.right {
  flex: 0 0 auto; /* 宽度自适应内容 */
  display: flex;
  justify-content: center;
  border: solid 2px green;
}

.spacer {
  flex: 1; /* 和左侧元素平分剩余宽度，撑起左侧和中间元素的间距 */
}

原理：通过左右两个占比相同的flex元素把中间的右侧元素“挤”到父容器正中间，完全不需要定位相关属性，完全符合纯Flex实现的要求。

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