Сохранение Div в строке

Question

Это выглядит как простая реализация, но некоторые из них не работают. У меня есть заголовок внутри. Я пытаюсь позиционировать 3 элемента влево, в середине и вправо по горизонтали. Вертикальные эти элементы будут выровнены по середине. См. fiddle для полного кода.
CSS

.head, .foot, .middle { 
      position: absolute; 
      width: 100%; 
      left: 0; 
     } 
     .middle { 
      top: 100px; 
      bottom: 50px; 
      height: 400px; 
      background-color: #ffd; 
     } 
     .head { 
      height: 100px; 
      top: 0; 
      background-color: #000; 
      color: #fff; 
     } 
     .container { 
      vertical-align: middle; 
     } 

     .helpText { 

      margin-left: 50%; 
     } 

     #clock { 
      float: right; 
     } 

     .position { 
      position: relative; 
     } 

HTML

<div class="head"> 
    <div class="container"> 
     <div class="position"> 
      <span>Position: </span> 
      <input type="radio" name="position" value="center" id="centerCheckbox" onclick="positionDiv()" checked>Center 
      <input type="radio" name="position" value="lowerRight" id="lrCheckbox" onclick="positionDiv()" >Lower Right 
     </div> 
     <div class="helpText">Press Esc key to hide the window. Enter to show it again.</div> 
     <div id="clock"></div> 
    </div> 
    </div> 

Answer 1

Я не уверен, если это то, что вы хотите. Но вот оно.

Используя table на контейнере и table-cell на отдельных div, вы получаете каждый раз по центру и по вертикали.

JSFiddle

body, html { 
 
    margin:0px; 
 
    padding:0px; 
 
} 
 
.container { 
 
    background-color:yellow; 
 
    width:100%; 
 
    height:200px; 
 
    display:table; 
 
} 
 
.container > div { 
 
    padding:10px; 
 
    text-align:center; 
 
    border: 1px solid black; 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
}

<div class='container'> 
 
    <div>Position: 
 
     <input type="radio" name="position" value="center" checked='true' />Center 
 
     <input type="radio" name="position" value="lowerRight" />Lower Right</div> 
 
    <div>Press Esc key to hide the window. Enter to show it again.</div> 
 
    <div>Clock</div> 
 
</div>

Answer 2

Вы не должны использоваться поплавок ребенку .container и установить .container к поведению таблицы и Чайлдс для отображения таблицы-ячейки с вертикальной выравнивать : средний, как:

.head .container { 
    display: table; 
    height: 100%; 
} 
.position, .helpText, #clock { 
    display: table-cell; 
    vertical-align: middle; 
    width: auto; 
    float: none; 
    text-align: center; 
    height: 100%; 
} 

https://jsfiddle.net/Pik_at/rb0s1kLe/1/