I have a pretty basic flex setup and, for whatever reason, the div in question won't vertically center inside its parent tag. You can see the isolated test case below.
.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>Here's a codepen to see it:
