<div class="container">
  <table>
    <tr>
      <td>default vertical alignment for a <code>td</code> is <code>middle</code>.</td>
      <td class="top">vertical-align: top;</td>
    </tr>
    <tr>
      <td class="middle">vertical-align: middle;</td>
      <td class="bottom">vertical-align: bottom;</td>
    </tr>
  </table>
  <hr>
  <div class="parent">
    <div class="table-cell">
      <p>
        I have <code>display: table-cell</code> and <code>vertical-align: middle</code> set. My content is aligned in the middle. However, I am not vertically aligned inside my container with the blue borders.
      </p>
    </div>
  </div>
</div>
* {
  box-sizing: border-box;
}

body {
  color: #555;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0 30px;
}

.container {
  margin: 40px auto;
  width: 600px;
}

table {
  border: 1px solid grey;
  width: 100%;
  background-color: #eee;
}

tr {
  width: 100%;
}

td {
  height: 200px;
  border: 1px solid grey;
  padding: 15px;
  width: 50%;
}
/* vertical-align-specific styles start here */

td.middle {
  vertical-align: middle;
}

td.top {
  vertical-align: top;
}

td.bottom {
  vertical-align: bottom;
}

.parent {
  padding: 20px;
  border: 2px solid #0099cc;
  height: 500px;
}

.table-cell {
  display: table-cell;
  height: 300px;
  vertical-align: middle;
  /* irrelevant styles */

  font-size: 20px;
  background-color: #eee;
  border: 1px solid grey;
  padding: 10px;
}