Flexbox - justify-content: centrar y alinear elementos: ¿el centro no funciona?

Tengo una configuración flexible bastante básica y, por cualquier razón, el div en cuestión no se centrará verticalmente dentro de su etiqueta principal. Puede ver el caso de prueba aislado a continuación.

.likeness-rank-table {
  border-radius: 3px;
  margin-bottom: 20px;
  display: block;
}
.likeness-rank-table .col {
  box-sizing: border-box;
  text-align: center;
  position: relative;
  flex: 1;
  max-width: 20%;
  min-height: 50px;
  display: flex;
  flex-wrap: wrap;
}
.likeness-rank-table .col .col-inner {
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 150px;
}
.likeness-rank-table .likeness-rank-table-body {
  display: flex;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border: 1px solid #a2a5a7;
}
.draggable-tags .draggable-tag {
  display: inline-block;
  float: left;
  width: 20%;
  margin-bottom: 5px;
}
.draggable-tag {
  text-align: center;
  padding: 0 15px;
  box-sizing: border-box;
}
.draggable-tag .draggable-tag-inner {
  position: relative;
  padding: 10px 0;
  background-color: #63b3ce;
  color: #fff;
}
<div class="likeness-rank-table">
  <div class="likeness-rank-table-body">
    <div class="col">
      <div class="col-inner droppable">
        <div class="draggable-tag ui-draggable">
          <div class="draggable-tag-inner">
            This Blue Box Should Be Horizontally and Vertically Centered Inside The Big White Box But It's Not
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Aquí hay un codepen para verlo:

http://codepen.io/trevorhinesley/pen/grQKPO

Respuestas a la pregunta(2)

Su respuesta a la pregunta