CSS Центровка центрирования Flexbox по горизонтали

Question

У меня есть контейнер flexbox, содержащий 2 div элементов. Контейнер 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