What am I missing to vertically align this text?

Question

I can set line-height to 85px and it will vertically align it, but I won't always know how tall the element is. I'm sure I'm missing something simple here... but what can I modify in the .content class to make the text vertically centered?

.tile {
  position: relative;
  width: 100px;
  height: 85px;
  display: inline-block;
  border: 1px solid red;
}
#container1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#container2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.content {
  margin: auto;
  height: 100%;
  vertical-align: middle;
  text-align: center;
}

<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile">
<div id="container1">
  <div id="container2">
    <div class="content">Test</div>
  </div>
</div>
</div>

Answer 1

You can use a psuedo element like this:

.content:after {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

See demo below:

.tile {
  position: relative;
  width: 100px;
  height: 85px;
  display: inline-block;
  border: 1px solid red;
}
#container1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#container2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.content {
  margin: auto;
  height: 100%;
  vertical-align: middle;
  text-align: center;
}
.content:after {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile">
<div id="container1">
  <div id="container2">
    <div class="content">Test</div>
  </div>
</div>
</div>