A Pen by Javier.

index.html

<div class="table container">
  <div class="table-cell">
      <code>display: table-cell;</code>
  </div>
</div>

<div class="wrapper container">
  <div class="inline-block">
      <code>display: inline-block;</code>
  </div>
</div>

style.css

/* COMMON */

.container{
  border: 2px solid #333;
  text-align:center;
  padding: 1em;
  margin-bottom: 1em;
  height: 200px;
}

/* TABLES */

.table{
  display: table;
  width: 100%;
}
.table-cell{
  display: table-cell;
  vertical-align: middle;
}

/* INLINE BLOCK */

.wrapper:before{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 1px;
}
.inline-block{
  display: inline-block;
  vertical-align: middle;
  
}

vertical-align-middle.markdown

vertical align middle

1 - Tables 2 - inline-block ghost element

A Pen by Javier on CodePen.

License.