Html Css柔性左对齐和中心对齐

我有flex容器，第一个元素需要左对齐第二个中心。我尝试用不同的选项来说明内容，并对齐项目=中心，这样这个分页框的第二个元素在中间，但是没有帮助。 这是css和html代码

paging-section {
  display: flex;
  height: 60px;
}

/* .paging-section div {
  flex: 1;
} */

.pagination-info {
  align-items: flex-start;
  margin-top: 15px;
  background-color: red;
}

.pagination-box {
  width: auto;
  height: 38px;
  margin: 20px 308px 369px 215px;
  padding: 0 16px 0 16px;
  border-radius: 4px;
  box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.08);
  border: solid 1px #d8dce6;
  background-color: #ffffff;
  display: flex;
  background-color: yellow;
  // justify-content: center;
  // align-items: center;
}

<div class="paging-section">
  <div class="pagination-info">
    <p>
      {{ size }}
      {{ 'ADMIN.PAGINATION.RESULTS' | translate }}
    </p>
  </div>
  <div class="pagination-box">
     ....
  </div>
</div>

分页部分{
显示器：flex；
高度：60px；
}
/*.传呼组分区{
弹性：1；
} */
.分页信息{
调整项目：灵活启动；
边缘顶部：15px；
背景色：红色；
}
.分页框{
宽度：自动；
高度：38px；
利润率：20px308px369px215px；
填充：0 16px 0 16px；
边界半径：4px；
盒影：0px 1px 2px 0 rgba（0,0,0,0.08）；
边框：实心1px#d8dce6；
背景色：#ffffff；
显示器：flex；
背景颜色：黄色；
//证明内容：中心；
//对齐项目：居中；
}

{{size}}
{{'ADMIN.PAGINATION.RESULTS'| translate}

....

如何实现这一黄色元素位于容器的中部，第一个黄色元素保留在左侧？谢谢

---

我已将固定宽度设置为

。分页信息

，并设置

边距：0px自动

到

。分页框

在末尾，我将

。分页框

翻译到

一半宽度的左侧。分页信息

有

转换：translateX（-50px）


。分页部分{
显示器：flex；
弯曲方向：行；
对齐项目：居中；
调整内容：灵活启动；
高度：60px；
}
/*.传呼组分区{
弹性：1；
} */
.分页信息{
调整项目：灵活启动；
背景色：红色；
最大宽度：100px；
宽度：100px；
最小宽度：100px；
单词break：打破一切；
}
.分页框{
保证金：0px自动；
转换：translateX（-50px）；
宽度：自动；
高度：38px；
填充：0 16px 0 16px；
边界半径：4px；
盒影：0px 1px 2px 0 rgba（0,0,0,0.08）；
边框：实心1px#d8dce6；
背景色：#ffffff；
显示器：flex；
背景颜色：黄色；
//证明内容：中心；
//对齐项目：居中；
}


{{size}}
{{'ADMIN.PAGINATION.RESULTS'| translate}

....
Perferct，它正在工作。谢谢@fakt309不客气