Выровнять текст по центру (по вертикали) у div с display: inline-block

div { 
  width: 100px; 
  height: 100px; 
  padding: 5px; 
  display: inline-block; 
  vertical-align: top; 
  border: 1px solid #f00; 
  text-align: center; 
} 
 
div:after { 
  content: ''; 
  height: 100%; 
  display: inline-block; 
  vertical-align: middle; 
}

<div>text</div>

Возможно

Мой любимый костыль, сам пользуюсь

<style>
.div-table{
    display: table;
    width: 100%;
    height: 100%;
}
.div-table-cell{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
</style>

В любой нужный элемент вписывается div-table, в него div-table-cell, и вот в него уже всё, что нужно разместить по центру по вертикали

<div>
   <div class="div-table">
      <div class="div-table-cell">
         ...что угодно, не только текст
      </div>
   </div>
<div>

vertical-align:

Оно применяется только к строчным элементам inline или строчным блокам inline-block. Оно влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда применяется к ячейкам таблицы).
Когда оно применяется к ячейке таблицы, выравнивание влияет на содержимое ячейки, а не на неё саму.