如何将Flexbox中的指定元素居中到页面中心？

我一直尝试将Flexbox中的某个元素居中到页面中心，但不确定有没有流畅的实现方式。试过用absolute/relative定位调整元素位置，但始终无法完全对齐；也曾考虑用grid让Flexbox元素跨中心列，但因网格单元数量和尺寸可能与目标元素不符，这种方式不够流畅。

我希望将Flexbox中最右侧的元素（蓝色盒子）居中到页面中心，同时让红色盒子仍位于其左侧。以下是我的示例代码：

示例代码 #

CSS

.title {
  text-align: center;
  font-weight: bold;
  font-size: 40;
}

.box {
  display: flex;
  margin: auto;
  justify-content: center;
}

HTML

<html>
    <div class="title">
        Test Title
    </div>
    <div class="box">
        <div style="background-color: red; padding: 1rem;">Left Item</div>
        <div style="background-color: blue; padding: 1rem;">Right item</div>
    </div>
</html>

需求示意图 #

流畅实现方案 #

可以通过Flexbox结合CSS变换的方式实现，无需依赖绝对定位或网格，完全自适应元素尺寸：

修改后的CSS

.title {
  text-align: center;
  font-weight: bold;
  font-size: 40px; /* 补充缺失的单位 */
}

.box {
  display: flex;
  justify-content: center;
}

.right-item {
  background-color: blue;
  padding: 1rem;
}

.left-item {
  background-color: red;
  padding: 1rem;
  margin-right: -100%; /* 将元素拉回至蓝色盒子左侧 */
  transform: translateX(-100%); /* 完全偏移至蓝色盒子外侧 */
}

修改后的HTML

<html>
    <div class="title">
        Test Title
    </div>
    <div class="box">
        <!-- 调整顺序：先放蓝色盒子，确保它居中 -->
        <div class="right-item">Right item</div>
        <div class="left-item">Left Item</div>
    </div>
</html>

方案说明 #

• 利用justify-content: center确保蓝色盒子在页面水平居中
• 通过margin-right: -100%让红色盒子的位置与蓝色盒子重叠，再用transform: translateX(-100%)将红色盒子完全移到蓝色盒子左侧
• 该方案无需固定尺寸，元素宽度变化时仍能保持蓝色盒子居中、红色盒子在左侧的布局，适配性更强

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