CSS Flexbox水平居中问题

Question

我有一个包含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>

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;
}

如果两个项目都是使用flexbox设置的（不是上面的绝对定位），此行显示了flexbox中心内容的位置

此行显示我希望flexbox将项目居中的位置（以第一项为中心）

Answer 1

如何将偏移项目宽度设置为0？

HTML：

<div class="container">
  <div>12:20</div>
  <div class="offset">AM</div>
</div>

和CSS：

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

http://codepen.io/anon/pen/dopQqo