Html CSS Flexbox水平居中问题

我有一个包含2个

div

项目的flexbox容器。flexbox容器是为一行设置的，该行将内容置于其中。我试图找出一种方法，将行的内容放在第一个项目的中心，然后将第二个项目放在第一个居中项目的右侧

下面是我最后不得不做的事情：使用flexbox将第一个项目居中放置，然后我必须将第二个项目绝对定位到所需位置。有没有办法去除第二个项目的绝对位置，使其正好出现在第一个项目的右侧，即居中

HTML

<div class="center-container">
    <div class="time">
        <span id="time">00:00</span>
    </div>
    <div class="time-ampm">
        <span id="time-ampm">XX</span>
    </div>
</div>

00:00
XX

CSS

.center-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

.time {
    flex: 1;
    font-size: 50px;
    font-weight: 300;
    color: #262626;
}

.time-ampm {
    position: absolute;
    top: 115px;
    left: 288px;
    /* flex: 1; <= this is what I want to use, not the absolute positioning used above */
    font-size: 20px;
    font-weight: 400;
    color: #858585;
}

.center容器{
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
证明内容：中心；
}
.时间{
弹性：1；
字体大小：50px；
字体大小：300；
颜色：#262626；
}
.time-ampm{
位置：绝对位置；
顶部：115px；
左：288px；
/*flex:1；将偏移项宽度设置为0怎么样

HTML:

只是一个反射。是否希望您的项目增长（flex grow>0）？在这种情况下，项目将占据容器的全部空间，并且没有必要说am文本必须位于其他项目的旁边……或者我误解了什么？
<div class="container">
  <div>12:20</div>
  <div class="offset">AM</div>
</div>

.container {
  display:flex;
  justify-content: center;
  align-items:baseline;
}
.offset {
  width:0;
}